Build Your Own Business Website header image

Rounded Tabs in 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 added rounded corners to his top level navigation menu items using the border-radius property of CSS3.  Unfortunately it also is adding those rounded corners to his sub-menu items which doesn’t look right.  He wants to retain the rounded corner for the main menu items but remove them from the rest of the menu items.

We look at how he applied the border radius to the menu, then we discuss how to be more specific in the rule so that the border radius applies only to the elements he wants it to.  Along the way I make a typo that takes a few minutes to troubleshoot.

Video Transcript

Okay and so Dennis is with us here and Dennis, I am going to talk about your navigation issue. I have your site up here and you asked, “How do you prevent radius curves on each item of the dropdown menu in the nav bar?” Each tab on the nav bar has curves on the top left and on the top right but every other child menu item does as well and he wants the rounded part of the top of this but he doesn’t want the rounded part for these child items. And so the trick here is just to be more specific about how you apply this rounded top to the tab here. And so what we’re going to do is we’re going to take a look at… we’re going to edit CSS, we’re going to take a look at the CSS you’re using here Dennis, to get there. And we’re going to scroll down here until we find something that looks like navigation, here we go… okay, this is it.

So you’ve got these border radiuses that you’ve defined. So you’ve got the moz border radius and then the web kit border radius and then the standard border radius defined for this stuff and… but you’ve attached it to custom .menu and then custom menu A and then custom menu LI UL. Well, so what you really want to do is be very specific. If we take a look at that element, you can see that this border radius is being… well, it’s as if it’s being applied to all 3 of these things… well, it is being applied to all 3 of those things.

But if you look down here, the background color which is what you’re affecting, the background color happens to menu A, menu current UL A, menu current cat UL A, menu current menu item UL A. Okay, so that’s what this background color is applied to. And so what you really want to do is you just want to apply this thing to custom menu A so that’s the first step. That makes this…oh, pardon me. Custom menu A… LI A? No. Isn’t that funny? Okay, let’s take a look at that again. So UL LI and then maybe we should just address the tab here… LI tab A. Isn’t that funny? That’s what I thought would work. Okay, let’s take out the LI. Okay, what am I doing wrong here? Oh, I had a little comma there. I didn’t even notice that comma. Okay, so if we take that out for a second… custom menu A, yeah okay, that was right. I had a dot in front of that A, didn’t I?

So you could do custom menu A and that still going to apply itself to everything because this is also custom menu A. So what you want to do is custom menu .tab A, that’s the first thing. And then the 2nd thing is you’d want to do the same thing for this submenu and so you can see that that was class menu tab so we want to turn off that border radius for class submenu item, okay? So let’s just copy this, paste it and then we’re going to custom menu…oh no, submenu, I’m sorry. Submenu and then item A and then what we’re going to do is we’re just going to make those zeros. So now we are going to zero out this stuff, we only need one zero there and now, it drops down straight like this as you can see. Now you know, there’s one other thing I would do here and that is I would make this tab piece the same width as that. Now in your… in Thesis Design Options, you have that choice where under navigation menu, you have this choice here – submenu width and it defaults to 150.

It looks to me like you really want that to be about 170, just measure that. No, you want it to be 110 so you must have made it even smaller. A width of 110 so you could come down here and just say width: 110 px; oops, that’s too big. That should work. Oh okay, that’s too much. Okay, isn’t that funny? There we go, width of 90 and now the dropdown is the same size as the tab above so that’s something to consider but anyway, all you need to do is change this down. And what I’m going to do here is actually, I’m going to go ahead and copy this code and then I’m going to paste it in the forum under Live Answers. I’ve set up a section now for Live Answer code and we’re just going to add a topic and this is going to be rounded navigation tabs. We’ll post that code there, delete it, and post that new topic and now that code should be easily available to you and we’ll move on.

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