Build Your Own Business Website header image

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.

Lesson 5 – Part 7 – Style the Main Nav Menu

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects - ,

Applies to -

I’m going to do one other thing and that is to style this top navigation menu. We’re going to start off with design options and we will be doing some of these in custom CSS but we’ll start by just doing what we can in Thesis Design Options.

Style Top Navigation Menu in Thesis Design Options

The font family is going to be Arial, we’ll make the size 14pt for the moment. The link text color is this color here, 798090. The hover color was white, the current link text color, I don’t think they actually are showing there but I made it a light gray, efefef. I made the current parent a light gray as well, efefef.

Now, the background color is going to be transparent for the link so we have to do that in custom CSS but the hover background color is going to be that darker blue, that’s the color right here so we’ll copy that. The current background color, we’ll just leave those two alone for the moment, we’re going to make both of those transparent. We’re actually getting rid of the border entirely so we’ll just make it 0. I’m going to go ahead and hit save for this.

Style Top Navigation Menu Using CSS

You’ll notice that we’ve ended up with a bunch of changes here. What we want to do is come in to our custom CSS and muck about with this so let’s refresh that. Again, we only want to style the menu up here so the styles that we’re going to add to this are just going to be inside of the header.

We’re essentially going to say, header-right menu, that’s going to be the thing we use. So, #header-right .menu and we’re going to make sure that we have that border none thing handled so we’re going to say, border:none. This is going to be something that’s important for the responsive part so we’re going to say, overflow:hidden and you’re not going to see why it’s important yet but you’ll see next week. Then we’ll say, float:left. That’s the overall menu.

Style the Main Link

We want to make some changes to the main link, menu a and the first thing we want to do is say, background-color:transparent. Now, what did I do wrong? Pardon me, it’s header-right not header_right. It’s header-right and besides background color being transparent, let’s just say, border:none again because Thesis has border in a couple of places, we’ll just make sure it’s gone.

I think we’re okay with fonts and colors but we want our letter spacing to be normal and we want to get rid of that text-transform which is currently set to all caps and we’re going to set that to none so no text transformation. There we go, we’ve got that part of it.

Then we’re going to give it some padding and that’ll be 0 pixels on the top and bottom. Actually no, my mistake. I want to fix this here for a second, border:none, overflow:hidden but we’re not floating this one left, I was looking at the wrong thing but I think we want to pop it down a bit so let’s give a margin, margin-top:10px.

Then background-color:transparent, font-weight, I knew that didn’t look quite right, font-weight:bold. I want to bring the font size up a bit, font-size:16px, see that’s not possible in Thesis, you can’t make the font that big with the Thesis Design Options. The other font works for the footer but it’s not going to work for the header.

Set Background Color for the Nav Menu

For padding, we’re going to say, 10px for the top and 20px for the sides. Notice how this hover color doesn’t kick in? The problem with this background-color:transparent, is this actually flows all the way through,  I’m not sure why Thesis codes it in such a  way that it does that so what we really have to do here is do the same thing for hover. Come over here, that’s menu a, now we’re going to have our background color for menu a was this color here.

Now, when we hover, we’ve got that. I think that’s actually all we need to do right now for the Nav Menu so we’ll copy that code, bring it over to this, that’s up by the header area so I’m going to put my Nav Menu stuff here. Header Nav Menu, we’ll save this, upload it, refresh it, here we go.

That’s interesting, something I didn’t really think about was adjusting the margin for this based on the image because if we come back over here to header image and remove the header image, so refresh it and now it’s that. Notice that 10px margin looks just right but it didn’t look so right otherwise so I think I’m going to work on this a bit.

I’ll come up with a system for adjusting the height of the header image so that the menu sits in the right spot because at the moment, it doesn’t. I forgot we’ve got that funny thing going on there, don’t we? Anyway, we will work on that next week.

Save $200 on Membership Now!

Start learning today for as little as
$0.82 PER DAY!
Subscription Options
0 Comments… add one
0 comments… add one

Leave a Comment