Home Forums Weaver Xtreme Theme CSS code for adding White Space at the Top & Bottom of the Sub-menu?

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

    What would be the code for adding a bit of white space at the top and the bottom of the sub-menu, the drop-down menu under the primary menu?

     

    Example: I would like a bit of white space above the “Entryway Boot Tray” link in the drop-down menu under “Boot Trays & more” …  and more space under the last link “Remove Your Shoes At The Door.”

     

    Main Options –>  Menus  –>  Primary Menu Bar  –>  Menu Bar BG

    This is the code for the spacing of the primary menu bar:

    #nav-primary .wvrx-menu ul li a {padding-top:1em;padding-bottom:1em;}

     

    Main Options –>  Menus  –>  Primary Menu Bar  –>  Submenu BG

    So I used this code to space the links further apart from each other:

    #nav-submenu .wvrx-menu ul li a {padding-top:1em;padding-bottom:.5em;}

     

    But how do I code this so there’s also a bit more space just above the sub-menu first link and also after the last sub-menu link?

     

    Thank you.

     

    https://www.dwellinthegarden.com

    #73715
    scrambler
    Moderator

    The rules below will add padding to the Sub menu container, and add the background color to fill that space

    ul.sub-menu {
    padding-top: 10px;
    padding-bottom: 10px;
    background-color: white;
    }

     

    #73716
    miamax
    Participant

    That code made an interesting effect. It not only gave space to the sub-menu under the primary menu, but it added space in the menu widget on the left. Which I like.

     

    But that meant the sub-menu in the widget was white, so I changed the color in the code to match my widget color — green.

     

    Now the sub-menu under the primary menu has a bar of the green color at the top and the bottom, since I changed the color to make the widget background all green.

    #73717
    scrambler
    Moderator

    You need to use two different rules for the background color (remove the background property from my initial rule

    #menu-horizontal ul.sub-menu {background-color: white;}

    #menu-left-sidebar ul.sub-menu {background-color: #D7DFD8;}

    #73718
    miamax
    Participant

    There’s still a green bar on the top of the primary sub-menu.

     

    This is the right code, yes?

     

    ul.sub-menu {
    padding-top: 10px;
    padding-bottom: 10px;
    #menu-horizontal ul.sub-menu {background-color: white;}
    #menu-left-sidebar ul.sub-menu {background-color: #D7DFD8;}
    }

    #73719
    scrambler
    Moderator

    No you mixed the rule together. Here are the final set

    ul.sub-menu {padding-top: 10px;padding-bottom: 10px;}

    #menu-horizontal ul.sub-menu {background-color: white;}

    #menu-left-sidebar ul.sub-menu {background-color: #D7DFD8;}

    #73720
    miamax
    Participant

    Perfect, thank you.

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