Building the Navigation For Your Website

Websites need solid navigation. Here is how to create a menu to navigate between pages.

Video

Transcript

0:01 All right. So in this video, we're going to talk about adding navigation to a page. So if you want to add navigation, uh, there's two ways to do it.

0:10 One, you can add a bar, uh, in delete some information out, or you can have it in a section with your logo.

0:18 So what I'm gonna do is I'm gonna delete this logo out and I'm going to add in an element, and I'm going to scroll down to the navigation menu element here, and I'm going to click that.

0:32 And what it's going to do is put a navigation menu up here. So if you notice we got rid of our logo.

0:37 So we want to add that in. So we'll select it. We'll scroll down to brand logo and we'll click that and we'll click on our logo.

0:50 And then we want to change the text. Now, the text in here for where it says business name. I like to just delete that out.

0:59 Uh, cause we've already got a logo in here, so we want to resize it to look good. So you can change the width and the height on the logo to kind of make it, look how you want it.

1:13 So that looks about right. Let's change the height down just a little bit, kind of center it up. And then you've got this white background here.

1:22 We don't want to wipe backgrounds since we have a black section here. So we'll click on the logo and we'll look for the background color.

1:31 So here it is white. So we'll select that. And we're going to change that to just opaque transparent. So as you can see now, our menu options have disappeared.

1:42 So we want to change the color of the menu options. So if we scroll down, we can see our colors so we can change these to white and now they show up.

1:57 So now we have some options here. And what it's going to do is pull the options that you have on your funnel or your website to pop some in.

2:07 So if you scroll through the section, when you have it selected, you can see that it's pulled in some sample pages here.

2:15 So what we want to do is to build this out. So you can select this little pencil icon, and it's going to say, you can either go to a website.

2:25 You can go to a step or you can go to a page if it's on a website. So this is on a funnel.

2:30 So it's going to say, go to step. I mean, what the home to go to the homepage, we can either open this in a new tab or have it on the same website.

2:41 So click submit. So now our home button is going to take us to the homepage on the funnel. So now we've got about that's our next link here.

2:51 So I want to edit that. So click on the pencil icon there. And we want to go to a step.

2:59 I mean, when a sync that up to the about page, we want to keep it on the same tab, unless we're going to an external site.

3:08 And lastly, we've got our contact us page. So let's edit that one there going to stab contact us and submit.

3:19 Now you'll notice we have this team when here doesn't go to anything. So what we can do is delete that out if we want.

3:27 And now we have a working navigation that will navigate to our different pages on our site. So we'll go ahead and save click.

3:35 Okay. It's saving, we'll exit out of that. And now we've got the options. If we want to add additional pages.

3:43 So let's add another page. And this time, instead of going to a page on our site, let's have it go to an external website.

3:52 So maybe we want to send traffic to Google. Let's just type in Google's website. And we want to keep our page this time.

4:02 We're going to do open a new tab. I'll click submit and we didn't give it a name. So let's go back in there and we'll change new menu to Google.

4:14 Okay? So now we've got a link that will take them to the website. Google let's add one more. And for this one, we're going to have one go to Yahoo.

4:26 It was a website and this could be any website, whatever you want, yahoo.com, new menu submits. Now we have Yahoo.

4:43 Now, one thing you could do is you can have sub menus on here too. So if you grab these little boxes to the right of your link, you can actually drag them and move them around to reorder them.

4:59 But you can also put them as sub pages. So see how it doesn't align on. Now it disappeared from here and now I've got a link, a dropdown menu that's popping up.

5:11 So if you want to have drop down menus, all, you got to do, grab these little boxes and put them in there.

5:18 And so now we have it under that. So you can see, you can play around with these and you can build some pretty intricate menus, uh, out into how you like it.

5:28 And then all you have to do click save. And then when you preview the site, now we have a menu there.

5:39 Awesome. There you go.