hi guys and welcome back this is Jamie
from system22.net and great-webdesign.com
here's the third part in our builder one
page scrolling bootstrap series in the
last video we added our favicon and
title and went through the index.html in
this one we're gonna start to style our
navbar here now this is a fixed man bar
so it stays at the top when we scroll
here and it's called what they call a
navbar brand which is just this this
lettering here you can either put your
own writing in or you can add a logo
every time you click on this it'll bring
people back to the top of the page so
let's get started the first thing we're
gonna want to do actually before we get
started i'm using google chrome here my
browser and i suggest you do the same if
you want to follow along okay so we've
got our folder with our bootstrap files
in it here we want to go to the CSS
folder and we want to open up the
scrolling map so i'm just going to right
click on it and open it with brackets
brackets is the free text editing
software we've been using if you don't
have it you there's a link to it below
it's free please download it if you need
to follow along with this okay so the
first thing we want to do is we'll edit
this and put your own legend ding in
there so if we go to the back to the
brackets and go to our index dot HTML
file if we scroll down here we go on
line 47 here it says start bootstrap you
can put your own company name in there
now we'll just do a quick save ctrl s
back to the site and if we do a fresh
now that should say my company
and what we can do we can change change
this you can change the color and and
the size of it if you need to if we just
hit the inspector right click and hit
inspect select what you actually want to
change there which in this case is this
and you see as I mouse over it the blue
line there it highlights it at the top
and if we look here if we want to make
that bigger on a nav bar brand here at
the moment it's a font size of 18 pick
say we want it to be 25 pix just
left-click and highlight that and type
your new number in there and as you see
that's got bigger we can make it bigger
again okay so we made it bigger and if
you want a different color just at the
top here now bar default navbar brand
it's got the color in there and you can
put in whatever color you can use a hex
color like what we've got here or you
can just put in red or green or blue
whatever it is the color that you want
to use
the works for your company and as you
can see let's change that to a red color
to make at the moment if we hit that
refresh button this will all go back to
how it was what I'm going to do is when
you're editing CSS with Chrome here just
get yourself a little notepad and when
you've made your changes just copy from
the beginning of the dot to the end of
that closing curly bracket there ctrl C
to copy or right click and copy however
you like to do it and just paste it into
your notepad because we'll be putting
this into our CSS file later on to keep
it permanent and again we changed this
we've change the size of the font and
what you want to remember is copying
that we only need to enter the new
settings that we've got so we didn't
change the float the height or the
padding or the line height here so all
we need is the font size so here we've
got our changes that we've just made
here if we go back to our brackets
before I do that what I'll do is to show
you this is this is non-destructive
everything we've done here once we hit
this refresh button it'll revert back to
how it was now to make it stay permanent
we need to put that into our CSS file so
if we open our brackets go through our
scrolling nav CSS file here let's start
down at the bottom when you make an
entry for a front certain section of
your page it's always a good idea to
give it a title that way you can find it
a lot easier if you've got a lot of CSS
to scroll through so if you do forward
slash star star forward slash go back
in the middle just right give it a title
I'm going to call this navbar so that we
know anything below this line is our
navbar CSS now your drop down a couple
of lines get my notepad here select it
all and copy it ctrl C and control V
paste it in there now when you do your
CSS you always want to make sure that
you've got everything you always want to
make sure there's an opening and curly
opening and closing curly bracket that's
really important and if you've got more
than one entry in there or attribute you
want to make sure you've got a semicolon
after it
okay so we've pasted that in there let's
do a safe as you can see there's a
little dot up there which means we
haven't saved it so ctrl s to save or up
to file and save now when we go back to
this site and refresh this should change
back to being that nice big red my
company logo there it is
but having said that that's not what I
really want to do here this is if you
don't have a logo you can just put your
company name in there or whatever you I
thought you've got a logo I'm gonna put
in there so I'm going to just quickly go
back to the brackets here and delete
that bit of CSS that we just put in
there I'll leave the title because we're
going to be using it again till quick
save and come back
refresh that it should go back to how it
was for anybody that doesn't have a logo
and you want a logo for your company
sites like fiverr.com you can get a
pretty good logo down for just $5 so
it's something to bear in mind there
okay if we go back to our folder with
our files in it
and here's that image folder we created
last time I've got a logo that I create
it I'll pull it over into there so with
my little logo I've created I'm just
gonna pull it into our image folder
now I've just called mine logo really
descriptive exciting name now to pull
this into our site here we want to go
back to our brackets to the HTML file
this time not the CSS and if we go down
to the page brand where we put in our
company name just now right here my
company what we'll do is we will just
delete that I've got to put a new entry
in and it's it's pulling the image in
much like we did with the favicon in the
last video there so if I just do that
IMG is the standard bootstrap for
pulling an image in an SRC spell that
wrong there Emma source equals and we
want a couple of inverted commas here
now I want it's in our image folder the
IMG folder and it's full slash and it's
actually prompting us for it is the logo
dot PNG there and then I want to get
closing bracket at the end of there now
if I mouse over that that should
actually show us that logo now there it
is and save ctrl s like the website just
get that one out of the way now when we
refresh our logo should appear here
there it is it's there we're going to
need to adjust the position of it a
little bit but there's a few things I
want to do here I want to make this
background white because we'll have a
nice image in that what they call the
hero section down here I want to push
these over to the right so that the logo
stands out a little bit more and it will
decorate these as well make them a
little more interesting
so let's inspect this once again
and we're looking for navbar Fran that's
the actual image itself
there's the navbar brand as you can see
it sort of highlights the space that
it's supposed to be be in and navbar
brand let's make it a little taller for
a start let's try 80 pix perhaps like I
say it doesn't matter what you do here
because it's non-destructive you can
always undo it later okay that may be a
bit too much we're also gonna have to
push that logo up a little bit it
supports 70 pics that will probably work
and padding see you can uncheck it just
to take it off there to see what's going
to happen that's gonna be a little
closer so with padding the first entry
right there is top and bottom so it's
got 15 pics at top 15 pics a problem
second one is right-to-left
you can do individuals so at the top
right bottom and left but when it's only
two entries it's when it's ending two
entries it's top and bottom left and
right so a padding top and bottom I'm
going to set that to zero
we'll keep the left and right I believe
and as you can see that's pretty much
where we want that thing you can make
this a little bit bigger if you want to
so let's just copy this and put it into
our and you notepad we've been using
remember from the dot to the closing
curly bracket or if you just done one
you can actually just from the dot the
one just remember to put that closing
curly bracket on there should you need
you so let's pull this over don't need
that
it speaks to our new takes and that
didn't change the float that can go did
change the height did change the padding
didn't change the font size or the line
in height so that I can stay alright so
next thing we're going to want to do is
push this over to the right-hand side
here so let's just select it that should
be actually the nav bar nav I believe
try that there and it should have a
float element that's pushing it over to
the left there we want to change that to
right there it is right there see if we
take that off doesn't do a lot let's
change it to right and as you can see
that's push it over this side here so
let's again copy this from the dot we
don't need that at medium in width
because that is actually what they call
a media query it's telling it to do
something when a screen size atom has a
minimum width of 768 so we just need
from the dot which is usual as usual to
the closing curly bracket control C I'll
paste it in there
now we didn't change that margin hatch
root so let's get rid of that one okay
let's see what do we want to do next
all I change the background color to
this and we're gonna have to push this
down slightly so it's more central so
let's do the background color first
let's just click on that area right
there and it should be I think it's now
bar default probably that looks like in
fact that easy right there
and so our background color right there
man by default just uncheck it and
should take that color away that's fine
so we want I want it white which is a
hashtag hexadecimal FFF it's actually
six f-f-f-f-f-f-f but when it's six in
the scene you just need to put three in
with html5 so let's change that to white
now and again of course you can have it
any color you want if you want it to be
red pretty red so as you can see it's
turning right if you want it to be
transparent different in transparent you
can't really tell there but he may ask
you said well why would you want it to
be transparent well if you've got a nice
background image here in your hero
section and you want it to go all the
way to the top then you're gonna want to
have a transparent if I scroll up now
you see that scroll you'd still see that
scrolling as it's going up you know the
words scrolling and you can see through
it but let's put it back to white stay
on target here that's hashtag FFF
picture that's more now if I do it
that's scrolling or disappear because
it's actually white and not transparent
okay so again we'll just copy what we've
changed here from the dock to the ending
curly bracket put it in our little
notepad you can put this straight in
your style sheet if you want to this is
just the way I do it because I do tend
to do quite a few edits at one time
border color will leave that because we
didn't change it just delete that
okay so we really want to move these a
little bit down because they're not
really centrioles they look a little out
of place there so let's select that and
again if you selected the wrong thing
just just roll up and down here with
your mouse until you get the correct
thing that you want in this case it's
probably them just a mare where it's own
yeah it's probably just an a var there
you see this blue line when I've got it
selected its selected all of the left so
here it is and what I want to do is add
a bit more padding to the top just to
push it down so just click after any
entry and it'll put a new line in there
for you and you're right padding top :
let's try I don't think 15 pics should
push it down by little ways yeah let's
pushed it down let's push it down a
little far let's try maybe 12 it's
almost there make nothing 10 might even
be perfect let's look
yeah that worked 10 so I'm gonna stick
with 10 there again
copy from the dot the ending bracket and
put it into our little notepad here
again don't worry about copying this CSS
here because I'll put it in a PDF file
below and you're welcome to download it
and use it on your site if you're
following along use whatever you want
how you want okay the only thing we
changed there was the padding
so we got those kind of where we want
them and if we scroll down the site here
when it gets to new sex you're seeing
it's highlighting there I want to change
this so it's just for a nice little red
line and the underneath the one rather
than that there if you want to change
that just inspect it there it's gonna be
the anchor there's a little box here you
see where it says HOF over here click on
that and hit the active tab it should
show you the CSS for the active link
which is the one we're all at the moment
then you have to scroll down and get the
cub color it's actually the focus one
residents yeah that's it so again if you
wanted that to be red I'm just using red
here's an example I guess my logo is red
then it'll do that narrow time we scroll
that will be red
but we don't want to do that I'm got a
different idea in mind for the
decoration for the nav links so before
we do that let's say the CSS that we've
got already and put it into our
stylesheet I just refresh this page now
it should go back to how it was
as you see let's copy over the CSS that
we've pasted into our little notepad
here make sure to select everything
because if you miss one of those little
dots off it won't work so with that back
to our brackets down at the bottom where
we left off and paste it in there there
we have it let's do a quick save ctrl s
now when we refresh this site hopefully
that will change white that will Center
itself these will be over here in the
center there we go get it back up the
top
that's fine so let's start on activating
these links or decorating these links
like I said before I want a nice little
red line underneath each of these when
we're active so let's just stroll down
and select that when it's active and
here we have it right here I want to
change the background color to
transparent and I want to give it a
border on the bottom I've got a nice red
color that I've copied it's just seeing
as my logo there so I'm just going to
copy that
and can I add a Patrick Buchanan a KITT
c23 picks maybe three picks solid so
it's solid rather than bashed and as you
can see it's already put one up there
now I just need to add my color which I
just copied there we go it seems my
Louis now it's got that little red line
there and we'll just as usual copy that
and I'll put it down under in fact I'll
delete this because we don't need it
like I said before I'll put a PDF of all
this CSS I'll link to it below this
video here so you've got it all should
you want to use it
okay so
you that now when we scroll to each
section see that the line goes across
there
I kind of like to see that read as well
the writing read when it's active
so it's active now now it's inspected
again and that's the color right there
so if I use this red color I've used
that before on the cordon border there
it's just me but this color so I'm just
going to copy that
left click on there and paste that in
there you see that thrift now now when
we scroll down it changes red each time
now I don't need to copy it out again
because we've already got it so I'm just
going to copy this color and replace the
color they've got there they're making
sure of course you've got that semicolon
on the end because if you've got more
than one attribute it won't work if you
don't have that
okay so we're happy with that
what else do we want to do to it we're
almost there
that's okay also how about I'd like when
we hover on it to have the same effect
so it's got a red line and a red text
when we hover on it so let's just select
one that's fine and still hover box here
you see it right here hover select that
so it drops down check the hover box and
they're saying the color see I want the
color to be that nice red color I had
just now so let's paste that in there
okay so now when I hover over it I'll
change that color but I also want that
border so I'll just copy I'm just gonna
copy the same thing rather than type it
out again you're welcome to type it out
again if you want to I'm not gonna take
that semi total because they'll be
already one there so let's just copy
that underneath paste it in there when
we hover oh we got a nice line okay and
I see one more little thing I'd like to
do I'll show you in just a minute but
let's just copy this top of the dot the
end of a curly bracket there I've just
pasted it in my notepad there this time
it's on the list item it's on the actual
anchor whereas before we were on the
anchor but not under the list item we
were on the active anchor okay I'm
pretty sure you know what I'm gonna say
now when we're whoring over this this is
great let's just uncheck this whole it's
great but you've got the active one
there and if I mouse over the one next
door it looks like it's one constant
line between the two I want to make a
break in that line there so it looks
like two separate items I can achieve
that by giving this a margin just to the
right of say two or three pixels
to give it a little bit of separation
so if we go to should be able to just go
to one of these again and and I don't a
lactic one I just want a regular one
I'm just gonna give it a margin
right
you can do left if you want to it
doesn't matter just as long as the one
side I'll give you a bit of separation
so margin right and I'll give it say
well about line three picks and let's
give it three picks you'll spread them
out just a slight little bit more but
now when we do the active and hover one
next door to it there should be a little
gap in between see there we go see now
looks like two separate things so again
we'll just copy that we actually don't
need all all of it so I'm just going to
copy that and a little bit that we did
the margin right there drag our little
text file over drop down and can you
remember what I said before really
important always make sure you've got a
closing curly bracket after it or it
will not work it will not read it like I
say you could have copied the whole
thing and deleted the parts that you
didn't want even if you didn't delete
them it would still work but it's a good
idea to keep this as minimal as possible
as your browser
it gives it less to read and your site
will react better to it
so I'm fairly happy with that let's copy
this over to our stylesheet
maybe I'll just pasted it in there after
our last session and we'll do a quick
save ctrl s back to the site get that
one out of the way let's close the
inspector and do a refresh bring it back
up to the top and do a refresh I should
now actually stay how we want it there
we are let's try our bounce section our
hole is working fine the text and the
border is changing and scroll to a
section active links seem to be working
okay and as you can see we've got a
little separation in between the two
there which is what we wanted so that's
it really for this video
in the next video we'll start working on
the hero section here
so once again this has been Jamie from
system 22 and great web design comm if
you've enjoyed this video please
subscribe to our channel I'll see you in
the next video
