Use this in any Custom CSS option there is
#nav-header.nav-container { background: pink; box-shadow: none; }
The above looks good with less code (1 line), because the pink happens to blend in with theme main styling in this area already.
So it depends on the background color of your choice. If it’s something really different, you will have to style the text link color and the backround on hover too.
EDIT: Theme uses rgba (opacity) on hover, so use any color of your choice and it should look good. Only text color might needs to be taken care of, if color contrast is too low.
Also, adding the color to the dropdown could be a good idea:
#header { background-color: red; }
@media only screen and (min-width: 720px) {
#nav-header .nav ul { background-color: red; }
}
Nice but what with drop down menu ? Old color remains.
Anonymous User 12851872
(@anonymized-12851872)
Hi,
in child theme
/* Menu Top bar et Header */
#nav-topbar .nav li a {color: #000;}
#nav-topbar .nav li > a:hover, #nav-topbar .nav li:hover > a, #nav-topbar .nav li.current_page_item > a, #nav-topbar .nav li.current-menu-item > a, #nav-topbar .nav li.current-menu-ancestor > a, #nav-topbar .nav li.current-post-parent > a {color: #000;}
#nav-header .nav li a {color: #000;}
#nav-header .nav li > a:hover, #nav-header .nav li:hover > a, #nav-header .nav li.current_page_item > a, #nav-header .nav li.current-menu-item > a, #nav-header .nav li.current-menu-ancestor > a, #nav-header .nav li.current-post-parent > a {color: #000;}
example : http://arnouvilleetsonpasse.fr/
