That blue (#1279be) is actually used in quite a few places in the classic menu!
Here are a bunch of CSS styles you’d need to override for your new colour. You were also just missing a digit in your code so I added an extra zero at the end.
.navigation-classic .primary-navigation .menu-primary > ul > li:hover, .navigation-classic .primary-navigation .menu-primary > ul > li.current-menu-item > a, .navigation-classic .primary-navigation .menu-primary > ul > li > a:hover, .navigation-classic .primary-navigation .menu-primary > ul > li > a:focus, .navigation-classic .primary-navigation .menu-primary > ul > li > a:active, .navigation-classic .primary-navigation ul ul li {
background-color: #910000;
}
.navigation-classic .primary-navigation ul ul:before {
border-bottom: 8px solid #910000;
}
.navigation-classic .primary-navigation ul ul ul:before {
border-right-color: #910000;
}
.navigation-classic .primary-navigation ul ul li:last-of-type {
border-bottom: 12px solid #910000;
}
.navigation-classic .primary-navigation .menu-item-has-children:before {
color: #910000;
}
I found these styles by looking at the theme’s stylesheet.
Don’t edit the theme files directly, otherwise your changes will be overwritten whenever the theme is updated.
An easy way to add custom CSS is to install the Jetpack plugin and activate the Custom CSS module. You’ll then add your custom CSS in the new stylesheet editor that’ll appear in your dashboard, under Appearance > Edit CSS.
As alternatives, you could either install a standalone custom CSS plugin, or create a child theme.
Let me know if this does the trick.
What about changing the the menu background colour? I’d like it to match the background colour of the pages.
http://hampshire-energy.coop/
we’ve changed the background colour to a darker blue, and we’d like the menu page background to be the same colour.
Could you advise what CSS to amend?
Thank you
taratibby – This CSS should do it:
.menu-toggle:focus, .menu-toggle.open:before, .navigation-wrapper {
background: #14487e;
}
Don’t edit the theme files directly, otherwise your changes will be overwritten whenever the theme is updated.
Since you’re already using Jetpack, an easy way to add custom CSS is to activate the Custom CSS module. You’ll then add your custom CSS in the new stylesheet editor that’ll appear in your dashboard, under Appearance > Edit CSS.
p.s. in future please start a new thread when you have a new question, thanks!
Thanks Kathryn – thats really helpful.
Tara
Hi,
I want to change the rollover color of the word menu and the circle around it. I used your css code to change all the other colors of the menu but it doesn’t change the color of the word “menu” nor the stroke of the circle around it in rollover state. Also, I was wondering how to change the color of the submit button at the end of a contact form.
Thanks
Hello Kathry!
I’ve seen your replies among many questions of this forum, all of them working great.
I haven’t found a response to one question though, Do you know how to change the mobile menu color for Edin?
I’m editing this site: http://www.urbanfit.cl
Thanks!
sacredpath
(@sacredpath)
Automattic Happiness Engineer
Hi @rankapitol, the background color for the touch device menu is set here:
.navigation-wrapper {
background: #1279BE;
}
If you have not yet done so, I would suggest creating a child theme so that any customizations you make will not be overwritten by a future theme update. Alternately you can use the Edit CSS function in the Jetpack plugin, or use one of the other Custom CSS plugins that will keep CSS changes from being overwritten.
Child Themes
Child Theme creation plugins
Jetpack plugin
Custom CSS plugins
Thank you! It worked perfect.
Do you know how can I change the font size and color for the menu (mobile and desktop)? I’m trying to leave the background white so it matches my website background color, Hence I need the font of the menu to be #000000.
Best regards.
sacredpath
(@sacredpath)
Automattic Happiness Engineer
Hi there, I see a number of color changes on the menu in your custom CSS. Have you gotten things where you want them?
<?php
include(‘nav-menu-dropdown.php’);
include(‘newtopbar.php’);
if ( function_exists(‘has_nav_menu’) && has_nav_menu(‘mobile-menu’) ) {
wp_nav_menu( array(
‘depth’ => 6,
‘sort_column’ => ‘menu_order’,
‘container’ => ‘ul’,
‘menu_id’ => ‘main-nav’,
‘menu_class’ => ‘nav mobile-menu’,
‘theme_location’ => ‘mobile-menu’,
‘walker’ => new Walker_Nav_Menu_Dropdown(),
‘items_wrap’ => ‘<div class=”mobile-menu”><form><select onchange=”if (this.value) window.location.href=this.value”>%3$s</select></form></div>’
) );
} else {
echo “<ul class=’nav mobile-menu’> <font style=’color:red’>Mobile Menu has not been set</font> “;
} ?>
</div>
can i change style of single menu item.
sacredpath
(@sacredpath)
Automattic Happiness Engineer
Hi @yam34, menu colors are virtually always done in the CSS. I would need a link to the site you are taking about, or at the very can you verify you are using Edin?
In general, you want to look at the HTML for the site and in the li element for the menu item you will find a unique CSS id that you can use to target specific menu items. On the Edin Demo page, the following is the code that would be used to change the “HTML Elements” menu item styling.
#menu-item-187 a {
color: #cc0000;
font-style: italic;
text-transform: none;
font-weight: normal;
}
