rounded edges for sub menus

[LorSmi]

I’m in the process of migrating my Weaver II them to Xtreme. I have found almost everything but one – when I set sub menus to rounded corners, its not working. The main menu is fine. I noticed on the Main Options Menu area where I checked all corners (rounded) I see this comment;

<small>Primary Menu Bar: Add rounded corners to menu. You might need to set overlapping corners Header/Wrapper areas also!</small>

Beneath that I have checked rounded submenu corners. But only the main menu has rounded corners. Where do I find “overlapping corners”? I’ve looked everywhere!

Thanks

[scrambler]

Are you trying to make each menu Item look like a button with rounded corners, or just round the edge on the menu bar and sub menu block?

ALso, please provide a link to your site so we can check what is going on

 

[LorSmi]

Yes, better to see what I mean…

 

Home

[scrambler]

This is because the rounding is on the submenu container, but your shaded background is on the menu item.

The container extends 6px above and below the Menu items and the rounding is happening there on a transparent background, so you do not see it.

If your submenu will only include a single item, you could add the property below where you added the gradient on sub menus

border-radius:8px;

But if you are going to have more than one item, and you only want the corners of the Sub menu container to be rounded, I will have to give you with CSS to only round the top corners of the first sub menu item and the bottom corners of the last sub menu items.

[scrambler]

If you will have more than one submenu item, an easier solution could be to remove the Submenu container top/bottom padding and set it to overflow:hidden so it clips the menu items background

The rule that would do that (to put in the Theme Global Custom CSS rule box) would be

.menu-primary ul.sub-menu, .menu-primary ul.children {padding:0;overflow:hidden;}

 

[LorSmi]

Yes, I will only have that one sub menu item. I put it in but it didn’t do anything. (I’m a novice at this)

What’s wrong?

.mygradient {
background-image: -webkit-gradient(linear, left top, left bottom, from(#a3998d), to(#dcd2c4));
background-image: -webkit-linear-gradient(top, #a3998d, #dcd2c4);
background-image: -moz-linear-gradient(top, #a3998d, #dcd2c4);
background-image: -o-linear-gradient(top, #a3998d, #dcd2c4);
background-image: -ms-linear-gradient(top, #a3998d, #dcd2c4);
background-image: linear-gradient(to bottom, #a3998d, #dcd2c4);
filter:prodig:DXImageTransform.Microsoft.gradient(startColorstr=’#a3998d′,endColorstr=’#dcd2c4′);
}
border-radius:8px;

[LorSmi]

Never mind – I put the new rule inside the brackets and it worked! Thanks for your help!

[Author]

Posts