Homepage: navigation — The Freelancer’s Journey


Hero section done. We’ll revisit a lot of
the smaller elements like the buttons some of the sizing spacing we’ll revisit a lot
of this as we keep building for now, we’ll work on getting us from this point hero section
only to adding our site navigation bar a nav bar. This is pretty straightforward. So we’re
going to move through it fairly quickly in just two parts first part is adding the nav
bar itself. The second is adding stuff to the navbar. So to add a nav bar we can go
to our ad panel and scroll down to the bottom under components. We have the navbar preset
right here. Now we can drag that right into the page body right at the top here and let
go now the navbar preset we’re using here. We’re just doing that to save time. You can
build your own navbar from scratch, but this is a good starting point. Let’s grab our logo
inside our assets. We have the logo for Hayes Valley Interior Design we can drop that right
inside this brand link block and we can resize it just by eyeballing and that looks pretty
good right there. And if we select that brand link block we can add some padding on the
top and bottom when you do the same time by holding down option or alt we can size it
until it’s about what we want, looks pretty good. And for these each of these is a link
block, a nav link each of these will take us to a different part of our site we’ll
delete all of them except for home right now. And if we check our content strategy notes
we can see we need homepage portfolio or process or design team and contact us. So let’s use
that as a starting point here. So we have home. Let’s apply a class or doing that now
so that changes we make to any one of these elements any one of these nav links will affect
the others. So the class will add we’ll call it now have link and we’ll copy and paste
just going to press command C command v a few times. So we have all our options just
click in to change each of these. This one will be portfolio. This one will be our process.
This one is our design team and finally this one is contact us. Now here’s the part that
saves time changes to any one of these will affect all the others because again, they
have the same class applied nav link. So if we go up here to padding hold down option
and change this the padding is affected on all of these nav links at the same time. So
let’s grab our nav bar itself and change its background color something like white would
be more appropriate for this design. And if we look at our container here, we have a nav
bar inside of that is a container, that container is keeping everything close to the center.
It’s keeping everything constrained and that’s good for some designs for this one. Let’s
set that containers minimum width to 100% I’ll make sure we’re going from edge to edge
now on the Hayes Valley link block. This is the brand link block you might want to add
some space because it’s a little close to the edge. Let’s add 20 pixels and on the right
of this we can see we actually have a nav menu we’ll just use this lower navigation
to navigate we can click nav menu. You might want to add a little spacing we can eyeball
this but let’s make it 10 pixels for now again, we can go through this a little bit later.
We might want to change that. In fact right now just eyeballing it we might want to make
it 5 pixels on the right and if we go into preview we can see it’s going to take up the
full width of our viewport. Now. One of the things to note here is because the section
itself, this is our home hero section because this is set to 100 VH. It’s currently spilling
off the page. That’s expected behavior. This is 100 VH. Meaning, the section itself is
taking a hundred percent of the viewport height. So adding the nav bar above has pushed that
down off the page. So there are a few ways to deal with this one. We could have the actual
nav bar itself hover above the content. We can just set its position with the navbar
selected. We could just set its position to fixed but now that the navbars fixed, regardless
of the amount of content you have on the page, so going to stay on top on the top of the
viewport. So as you scroll down content will tuck underneath the navbar will remain on
top, but that’s it later as we build the site we can come back to this and configure our
links in the navbar. But for now we added the navbar and we added the content inside
the navbar. Up next we’ll build out more of our home page including a step. We literally
call magic.

One Comment

Add a Comment

Your email address will not be published. Required fields are marked *