Changing menu colors using CSS code

You can change the foreground and background colors of menu items from the Colors & styles screen, or using CSS code. The CSS code required depends on which website theme you are using.

You can change the foreground and background colors of the top-level menu and the drop-down menu, and the colors that are used when you hover over a top-level or drop-down menu item.

To apply CSS code, go to the Website module and click the CSS option at the top of the screen. 

On the screen that appears, enter the code in the Editor panel, then click Save to preview your customization within the preview area on the right. When you are finished making your changes, click Cancel to close the screen.

Within your code, you can enter the color name or enter the hexadecimal code for the color. For example, you could enter "red" as the color name, or enter #FF0000, the hexadecimal code for red. For a complete list of supported color names and their hexadecimal codes, click here.

Bookshelf themes

To change the background color of the top-level menu, use the following CSS code:

.WaGadgetMenuHorizontal .menuInner ul.firstLevel{
background: green !important;
}

To change the foreground color – the color of the menu items – for the top-level menu, use the following CSS code:

.WaGadgetMenuHorizontal .menuInner ul.firstLevel>li>.item>a{
color: black !important;
}

To change the foreground and background color that appears when you hover over a top-level menu item, use the following CSS code:

.WaGadgetMenuHorizontal .menuInner ul.firstLevel>li>.item>a:hover{
background: red !important;
color: black !important;
}

To change the background color of the drop-down menu (the second-level or child menu ), use the following CSS code:

.WaGadgetMenuHorizontal .menuInner ul ul{
background: green  !important;
}

To change just the foreground color – the color of the menu items – for the drop-down menu, use the following CSS code:

.WaGadgetMenuHorizontal .menuInner ul ul li>.item>a{
color: black !important;
}

To change the foreground and background color that appears when you hover over a drop-down menu item, use the following CSS code:

.WaGadgetMenuHorizontal .menuInner ul ul li>.item>a:hover{
background: red!important;
}

Building Blocks themes

To change the background color of the top-level menu, use the following CSS code:

.WaGadgetMenuHorizontal .menuInner ul.firstLevel{
background: green !important;
}

To change the foreground color – the color of the menu items – for the top-level menu, use the following CSS code:

.WaGadgetMenuHorizontal .menuInner ul.firstLevel>li>.item>a{
color: black !important;
}

To change the foreground and background color that appears when you hover over a top-level menu item, use the following CSS code:

.WaGadgetMenuHorizontal .menuInner ul.firstLevel>li>.item>a:hover{
background: red !important;
color: black !important;
}

To change the background color of the drop-down menu (the second-level or child menu ), use the following CSS code:

.WaGadgetMenuHorizontal .menuInner ul ul li>.item>a{
background: green !important;
color: black !important;
}

To change the foreground and background color that appears when you hover over a drop-down menu item, use the following CSS code:

.WaGadgetMenuHorizontal .menuInner ul ul li>.item>a:hover{
background: red !important;
color: black !important;
}

Casefile themes

To change the background color of the top-level menu, use the following CSS code:

.WaGadgetMenuHorizontal.HorizontalMenuStyle001 .stickyMenu{
background: green; 
}

To change the background color that appears when you hover over a top-level menu item, use the following CSS code:

.WaGadgetMenuHorizontal.HorizontalMenuStyle001 .stickyMenu :hover{
background: red;
}

To change the background color of the drop-down menu (the second-level or child menu), use the following CSS code:

.WaGadgetMenuHorizontal.HorizontalMenuStyle001 .menuInner ul ul li>.item>a{
background: green;
}

To change the background color that appears when you hover over a drop-down menu item, use the following CSS code:

.WaGadgetMenuHorizontal.HorizontalMenuStyle001 .menuInner ul ul li>.item>a hover{
background: red;
}

To change the background color of the sidebar, use the following CSS code:

.WaPlaceHolderSidebar{
background: red;
}

Fiesta themes

To change the background color of the top-level menu, use the following CSS code:

.WaGadgetMenuHorizontal .menuInner ul.firstLevel{
background: green !important;
}

To change the foreground color – the color of the menu items – for the top-level menu, use the following CSS code:

.WaGadgetMenuHorizontal .menuInner ul.firstLevel>li>.item>a{
color: black !important;
}

To change the foreground and background color that appears when you hover over a top-level menu item, use the following CSS code:

.WaGadgetMenuHorizontal .menuInner ul.firstLevel>li>.item>a:hover{
background: red !important;
color: black !important;
}

To change the background color of the drop-down menu (the second-level or child menu ), use the following CSS code:

.WaGadgetMenuHorizontal .menuInner ul ul{
background: green  !important;
}

To change just the foreground color – the color of the menu items – for the drop-down menu, use the following CSS code:

.WaGadgetMenuHorizontal .menuInner ul ul li>.item>a{
color: black !important;
}

To change the foreground and background color that appears when you hover over a drop-down menu item, use the following CSS code:

.WaGadgetMenuHorizontal .menuInner ul ul li>.item>a:hover{
background: red!important;
}

Firma themes

To change the background color of the top-level menu, use the following CSS code:

.WaGadgetMenuHorizontal .menuInner ul.firstLevel{
background: green !important;
}

To change the foreground color – the color of the menu items – for the top-level menu, use the following CSS code:

.WaGadgetMenuHorizontal .menuInner ul.firstLevel>li>.item>a{
color: black !important;
}

To change the foreground and background color that appears when you hover over a top-level menu item, use the following CSS code:

.WaGadgetMenuHorizontal .menuInner ul.firstLevel>li>.item>a:hover{
background: red !important;
color: black !important;
}

To change the background color of the drop-down menu (the second-level or child menu ), use the following CSS code:

.WaGadgetMenuHorizontal .menuInner ul ul{
background: green  !important;
}

To change just the foreground color – the color of the menu items – for the drop-down menu, use the following CSS code:

.WaGadgetMenuHorizontal .menuInner ul ul li>.item>a{
color: black !important;
}

To change the foreground and background color that appears when you hover over a drop-down menu item, use the following CSS code:

.WaGadgetMenuHorizontal .menuInner ul ul li>.item>a:hover{
background: red !important;
color: black !important;
}

Homestead themes

To change the background color of the top-level menu, use the following CSS code:

.WaGadgetMenuHorizontal .menuInner ul.firstLevel{
background: green !important;
}

To change the foreground color – the color of the menu items – for the top-level menu, use the following CSS code:

.WaGadgetMenuHorizontal .menuInner ul.firstLevel>li>.item>a{
color: black !important;
}

To change the foreground and background color that appears when you hover over a top-level menu item, use the following CSS code:

.WaGadgetMenuHorizontal .menuInner ul.firstLevel>li>.item>a:hover{
background: red !important;
color: black !important;
}

To change the background color of the drop-down menu (the second-level or child menu), use the following CSS code:

.WaGadgetMenuHorizontal .menuInner ul ul{
background: green  !important;
}

To change just the foreground color – the color of the menu items – for the drop-down menu, use the following CSS code:

.WaGadgetMenuHorizontal .menuInner ul ul li>.item>a{
color: black !important;
}

To change the foreground and background color that appears when you hover over a drop-down menu item, use the following CSS code:

.WaGadgetMenuHorizontal .menuInner ul ul li>.item>a:hover{
background: red !important;
color: black !important;
}

Kaleidoscope themes

To change the background color of the top-level menu, use the following CSS code:

.WaGadgetMenuHorizontal .menuInner ul.firstLevel{
background: green !important;
}

To change the foreground color – the color of the menu items – for the top-level menu, use the following CSS code:

.WaGadgetMenuHorizontal .menuInner ul.firstLevel>li>.item>a{
color: black !important;
}

To change the foreground and background color that appears when you hover over a top-level menu item, use the following CSS code:

.WaGadgetMenuHorizontal .menuInner ul.firstLevel>li>.item>a:hover{
background: red !important;
color: black !important;
}

To change the background color of the drop-down menu (the second-level or child menu ), use the following CSS code:

.WaGadgetMenuHorizontal .menuInner ul ul li>.item>a{
background: green !important;
color: black !important;
}

To change the foreground and background color that appears when you hover over a drop-down menu item, use the following CSS code:

.WaGadgetMenuHorizontal .menuInner ul ul li>.item>a:hover{
background: red !important;
color: black !important;
}

Skyline themes

To change the background color of the top-level menu, use the following CSS code:

.WaGadgetMenuHorizontal .menuInner ul.firstLevel{
background: green !important;
}

To change the foreground color – the color of the menu items – for the top-level menu, use the following CSS code:

.WaGadgetMenuHorizontal .menuInner ul.firstLevel>li>.item>a{
color: black !important;
}

To change the foreground and background color that appears when you hover over a top-level menu item, use the following CSS code:

.WaGadgetMenuHorizontal .menuInner ul.firstLevel>li>.item>a:hover{
background: red !important;
color: black !important;
}

To change the background color of the drop-down menu (the second-level or child menu ), use the following CSS code:

.WaGadgetMenuHorizontal .menuInner ul ul{
background: green  !important;
}

To change just the foreground color – the color of the menu items – for the drop-down menu, use the following CSS code:

.WaGadgetMenuHorizontal .menuInner ul ul li>.item>a{
color: black !important;
}

To change the foreground and background color that appears when you hover over a drop-down menu item, use the following CSS code:

.WaGadgetMenuHorizontal .menuInner ul ul li>.item>a:hover{
background: red !important;
color: black !important;
}

Terra themes

To change the background color of the top-level menu, use the following CSS code:

.WaGadgetMenuHorizontal .menuInner ul.firstLevel{
background: green !important;
}

To change the foreground color – the color of the menu items – for the top-level menu, use the following CSS code:

.WaGadgetMenuHorizontal .menuInner ul.firstLevel>li>.item>a{
color: black !important;
}

To change the foreground and background color that appears when you hover over a top-level menu item, use the following CSS code:

.WaGadgetMenuHorizontal .menuInner ul.firstLevel>li>.item>a:hover{
background: red !important;
color: black !important;
}

To change the background color of the drop-down menu (the second-level or child menu ), use the following CSS code:

.WaGadgetMenuHorizontal .menuInner ul ul{
background: green  !important;
}

To change just the foreground color – the color of the menu items – for the drop-down menu, use the following CSS code:

.WaGadgetMenuHorizontal .menuInner ul ul li>.item>a{
color: black !important;
}

To change the foreground and background color that appears when you hover over a drop-down menu item, use the following CSS code:

.WaGadgetMenuHorizontal .menuInner ul ul li>.item>a:hover{
background: red !important;
color: black !important;
}

Tinted Tiles themes

To change the background color of the top-level menu, use the following CSS code:

.WaGadgetMenuHorizontal .menuInner ul.firstLevel{
background: green !important;
}
.WaGadgetMenuHorizontal .menuInner {
background: green;
}

To change the foreground color – the color of the menu items – for the top-level menu, use the following CSS code:

.WaGadgetMenuHorizontal .menuInner ul.firstLevel>li>.item>a{
color: black !important;
}

To change the foreground and background color that appears when you hover over a top-level menu item, use the following CSS code:

.WaGadgetMenuHorizontal .menuInner ul.firstLevel>li>.item>a:hover{
background: red !important;
color: black !important;
}

To change the background color of the drop-down menu (the second-level or child menu), use the following CSS code:

.WaGadgetMenuHorizontal .menuInner ul ul li>.item>a{
background: green !important;
color: black !important;
}

To change the foreground and background color that appears when you hover over a drop-down menu item, use the following CSS code:

.WaGadgetMenuHorizontal .menuInner ul ul li>.item>a:hover{
background: red !important;
color: black !important;
}

Whiteboard themes

To change the background color of the top-level menu, use the following CSS code:

.menuInner{ 
background: green !important; 
}
 
.WaGadgetMenuHorizontal.menuStyle002 .menuBackground{ 
background: green !important; 
}

To change the foreground and background color that appears when you hover over a top-level menu item, use the following CSS code:

.WaGadgetMenuHorizontal .menuInner ul.firstLevel>li>.item>a:hover{
background: red !important;
color: black !important;
}

To change the background color of the drop-down menu (the second-level or child menu), use the following CSS code:

.WaGadgetMenuHorizontal .menuInner ul ul li>.item>a{
background: green !important;
color: black !important;
}

To change the foreground and background color that appears when you hover over a drop-down menu item, use the following CSS code:

.WaGadgetMenuHorizontal .menuInner ul ul li>.item>a:hover{ 
background: red !important; 
}

Mobile menu

To change the foreground and background colors of the mobile version of your menu, use the following CSS code:

.WaGadgetMobilePanel .mobilePanel .menuInner ul{
background: green !important;
color : black !important;
}