Build Your Own Business Website header image

Fine Tune the Width and Location of the Navigation Menu

Difficulty Level -

Filed Under Topics - , , , ,

Listed Under Lesson Subjects -

Whoops, you've found some premium content!

Watch the opening clip of this video to preview it,
the full video is available to paid members.

A member has a navigation bar on her website that doesn’t line up with the header above it. We inspect the menu’s elements in Firebug and adjust the style using Edit CSS on Web Developer to get the navigation menu to look right. To do this we adjusted the margin on the .custom .menu and added a background color to fill in white space at the end of the menu.

Video Transcript

I have a navigation bar on my main freelance writing website that doesn’t quite line up with a border on the header and I don’t know how to make that really sit better.

Okay, can you give me a URL, an address?

Yes, it’s savadra.net.

Okay so I’m looking at it now and what is it that you want to happen here?

It’s much more noticeable if you go to a page over my homepage, you’re going to see that that tab, the home tab doesn’t quite line up with the border of the separation between my first and last name.

Okay and you got a little tiny white there too, right?

Yeah, yeah.

Okay, yes we can… there’s a couple of ways we can do this but let’s try one way which is just adding a little bit of padding to this tab. So let’s see, let’s inspect that element and let’s turn on CSS here. Oops, that’s not what I meant. Edit CSS, custom CSS, okay. So now, we’re looking at the home tab and so that is tab-1. And so, we should be able to simply say let’s see, .custom UL .menu LI .tab-1. And then let’s see, padding left colon, it’s got 20 pixels. Okay, we actually have a definition. Oh, the real problem is that.

Okay.

Okay, let’s misspell this for a second so that goes away and then let’s see, our menu is defined as having a left margin of 260 pixels.

Right, I think I tried to move that over a little bit and then ended up getting something funny happening on the end and I’m not really sure how to fix it.

Yeah well, it’s probably easier to line up the left hand side and then just expand this to fill in the right.

Yeah, I don’t know how to expand the right hand side, I guess.

That’s fine. I can show you how to do that. So what we do then with this instead is we take our custom menu and margin left, we turn that down to 255. And then the rest of it, let’s see… we might in fact, we might say width: 100%; and then… and what is that background color? That is… let’s see, UL menu LI a and it is… oh, I’m looking at services, that’s why. Background is efefef so we could just… now that we’ve done that, just say background color: efefef; That width: 100% didn’t do the job well. Although simply adding the background color to the menu extended that gray over. Now when you hover here, you can see that little gray spot’s still in the right hand side but you know, that might not be objectionable.

That’s not really objectionable to me, as far as I’m concerned.

So then the trick here is to give yourself a left margin of 255 pixels and then that left background color. Now, let’s just test it real quick on the homepage. Let’s make sure it works okay on the homepage because for some reason or another, the homepage is a little…oh you don’t see it on the homepage because the white… yeah, that’s… but still, it’s custom CSS. Let’s just get that right here. Okay so now you know, you got that thing going all over. So it does work in both cases, that custom .menu margin left: 235 pixels and background color: efefef just works just fine for that.

Okay, okay. Great.

Do you need me to send you this code or paste it someplace?

Yeah.

Okay, I’ll do that. Actually, I wonder if… I wonder if you can just copy it out of the chat window.

Can I? I’m not sure if I can… oh…4

Yeah actually, it looks like you can.

Yes, there we go.

Okay.

Alright, I’ll just save that.

So okay…

Great. Thank you.

You’re welcome, okay. So let’s move on then, back to our project here.

0 Comments… add one

Save $200 on Membership Now!

Start learning today for as little as
$0.82 PER DAY!
THIS IS A LIMITED TIME OFFER!
Subscription Options
0 comments… add one

Leave a Comment