Build Your Own Business Website header image

Style Individual Menu Items on the Thesis 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.

This member wants to add a border radius to the upper left and right corners of his Thesis navigation menu. We demonstrate adding top margin to the menu, removing some unnecessary border, adding the border radius to the appropriate menu items and limiting the changes to the immediate children of the selector.

Video Transcript

So this member asks how to take this navigation menu, drop it down… the dark gray and then how to add a border radius to the top left corner of this menu item and the top right corner of this menu item and then how to get rid of this line that extends out here. So that’s what we’re going to talk about here and this is the perfect follow up for the lesson series that i just published, Customize Thesis Like a Pro Lesson 6 on Specificity and Inheritance. We’re going to apply those to this navigation menu.

So let’s go ahead and open up Firebug and Web Developer and then let’s inspect the element to see what it is we’re looking at. And we’re looking at this UL class menu so we’re going to give that a top margin first. So .custom UL .menu and then margin top: 10 pixels, margin… obviously, we have to spell that correctly. Margin top 10 pixels, okay that’s good.

Now it’s also this UL menu that gives us this bottom border line here so we’re going to go ahead and say border none. Okay so that got rid of that bottom border. Although you’ll notice, it also got rid of the border on the edge here too, so we’re going to have to put that back in. And in order for us to do that border radius, we’re going to want to do that on this LI class tab 1. So let’s just go ahead and write that one right now. .custom LI .tab 1 and we’re going to do the same thing for tab 6 which is the far right-hand side. So we’ll call that tab 6.

Now, for tab 1, we want to add some border and we’re going to want this border to be the same border as we have right now. So if we go back over and look at menu you know, the border color is ddd. The border width is 0.1 em and the border style is solid. I think… so we’re just going to grab that one, 0.1 em. And so, we’ll say border left: and so then it’ll be the width and then space and then solid and then space and the color, dddddd.

Okay so now we have that line back where we want it. And then we need to add the radiuses and so let’s go take a look at W3 schools here, w3 schools under CSS 3 and then we’re going to look at the CSS 3 reference under border top left radius and and border top right radius. You can see here as an example of this where the border the border top left radius there giving it a radius of 2 ems and this is for Firefox and the version of Firefox I happen to be using. So we’re just going to go ahead and grab those two and put them in the CSS.

Now as it turns out, this border radius really shouldn’t be applied to tab 1. Plainly, it should be a tab 1 a. And once we have tab 1 a there, we end up with this nice round radius. Now you can see, unfortunately, it adds it to all the rest of these so we’re going to have to work on that yet just a little bit more to make it more specific. But first, let’s just make it smaller. So 5 px and 5 px, okay there we go. Nice, small radius and then we only want it to apply to this a but none of the rest of the a’s, not the rest of the links. So instead of being Li tab – 1a which applies to all a’s under Li tab – 1, we all want it simply to be the immediate child of. So we put that immediate parent symbol in. So now, the only one that’s affected is the a that is in Li tab 1 but not any of the rest of the a’s, so just the most immediate a.

Well, it turns out, this is exactly the same thing we’re going to do for the next one. So it’s not top left radius in this case though, right? It’s going to be the top right radius and top right. And then it’s not the 6, it’s 6a. Now you can see it’s got this nice little round radius but it exists over here too. And so, we just need to make it the immediate child of.

And so now, none of these are affected by that but all the rest are. And that pretty much handles that. There’s a lot more to learn about specificity and inheritance and the nav menu is the perfect place to do it because it has so much complex relationships between the parts. So I encourage you, if you haven’t done so already, to go and look at Lesson 6 of the Customize Thesis Like a Pro tutorial series so that you’d get a good sense of how this all works.

0 Comments… add one

Save $200 on Membership Now!

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

Leave a Comment