CSS code for adding White Space at the Top & Bottom of the Sub-menu?

[miamax]

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

[scrambler]

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

 

[miamax]

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.

[scrambler]

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

[miamax]

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

[scrambler]

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

[miamax]

Perfect, thank you.

[Author]

Posts