Home Forums Weaver Xtreme Theme rounded edges for sub menus

Topic Resolution: Resolved
Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #64579
    LorSmi
    Participant

    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

    #64581
    scrambler
    Moderator

    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

     

    #64583
    LorSmi
    Participant

    Yes, better to see what I mean…

     

    Home

    #64584
    scrambler
    Moderator

    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.

    #64585
    scrambler
    Moderator

    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;}

     

    #64586
    LorSmi
    Participant

    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;

    #64587
    LorSmi
    Participant

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

Viewing 7 posts - 1 through 7 (of 7 total)
  • You must be logged in to reply to this topic.