Support » Themes and Templates » TwentyFourteen – how to change submenu background?

  • I can’t find where or how to change the background colour or background image for submenus. Is it possible to do this, independently of the main (primary top level) menu elements? Or at the very least, remove the default background colour when I’m using a background image?

    I’ve used the Fourteen Extended and Fourteen Colors plugins for other things, and added a Child style.css file to make other changes, successfully.

    Another post I’ve seen suggests editing the #menu-top-menu {} entry in CSS to change font size, but I can’t find any reference to that in the main theme style.css, and when I add such a reference and enlarge the font size in my child style file, it makes no difference to the site.

    What does the > symbol mean in the following section from the original style.css file? I think it means ‘use the same style as the parent’ but is that right, and is it where I should try to make the change?

    .site-navigation .current_page_item > a,
    .site-navigation .current_page_ancestor > a,
    .site-navigation .current-menu-item > a,
    .site-navigation .current-menu-ancestor > a {
    	color: #55d737;
    	font-weight: 900;

    Thanks if anyone can point me in the right direction.

    John McC

Viewing 6 replies - 1 through 6 (of 6 total)
  • Hi John,

    To change the submenu’s background color it’d be helpful if you posted you site’s url. Using Firebug it’ll be possible to locate the right selectors to target. Regarding the > symbol, it refers to the parent and child elements. For example, .site-navigation .current_page_item > a
    targets the link element that is a child of the element with a class of current_page_item. The latter is inside the element with a class of .site-navigation.

    Thank you so much for such a prompt and helpful reply.

    The (very much new, incomplete, and evolving temporary) site url is

    I’ve tried using the Chrome Web Developer tools equivalent of Firebug to see what class or id to use to style the menu elements, but get somewhat confusing results.

    For example, the first submenu element (Hygiene) of Projects shows when I select ‘Display ID and Class information’. I can see this is an id reference, and a very long one. And it only refers to one sub-menu element, so wouldn’t be a candidate for styling via CSS, as I’d want to refer to all sub-menu items in one go.

    If I choose instead to ‘Display Element Information’ and choose the same item, I get Ancestors:

    which suggests that CSS referring to either ul#menu-main.nav-menu or more likely ul.sub-menu might be the place to modify the appearance.

    But I can’t find any reference in the theme’s own style.css file to either of these. So where is the plain orange background (that I want to get rid of) for these elements coming from?

    Should I just add such an entry in my Child theme style.css?

    Thanks again if you can help further.

    John McC

    PS. Just tried setting this in the child theme CSS style.css file

    ul.sub-menu {
    	background-color:#00FF00; /* a vicious green, to show up */

    but it makes no difference.

    Try with this:

    .nav-menu .sub-menu,
    .nav-menu .sub-menu li,
    .nav-menu .sub-menu li a {
        background-color: #00FF00 !important;

    It seems to me most of these styles are dynamically added from the back-end and they appear as inline styles in the HTML markup of the page (if you view the page in page source by right-clicking on the page and selecting View Page Source, you find the site navigation styles from about line 337 onwards).

    Try the above snippet without !important. If it doesn’t work, add !important again and see if it works.

    For the hover styles, simply add:

    .nav-menu .sub-menu li:hover,
    .nav-menu .sub-menu li a:hover {
        background-color: blue !important;

    Obviously, change the background color to whatever you like.

    Brilliant. Thank you. That’s given me the lead I needed.

    Where on earth might I have looked this up? It seems not at all obvious, and the information doesn’t seem to show in the Web Developer tools or information.

    It seems to work ok without !important.

    I hadn’t realised that so many of these styles were ‘added from the back-end’. Where is that done? In the PHP code of the relevant pages in the theme? Or in the original WP source code? I can look in future in the View Source output, so thanks too for that general observation.

    Thanks again for your help.

    John McC

    I’m so glad it worked. The inline CSS is usually added using a custom option panel, a plugin, or, in newest themes, a great WordPress tool called theme customizer. If you go to Appearance -> Customize you see a bunch of customization options that are implemented by printing the relevant style values selected by the user in the HTML markup. The heavy lifting is all done via PHP, usually in the functions.php file or in other php files that get included in functions.php (in twenty-fourteen you can find some of these in the inc folder). If you’re curious, you can browse the files that make up your theme, it’s really interesting and a lot can be learned from it.

    Thanks again. I have’t time just at the moment to look, but hope to do so out of curiosity soon.


Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘TwentyFourteen – how to change submenu background?’ is closed to new replies.