WordPress.org

Ready to get started?Download WordPress

Forums

TwentyFourteen - how to change submenu background? (7 posts)

  1. johnwmcc
    Member
    Posted 10 months ago #

    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

  2. Maria Antonietta Perna
    Member
    Posted 10 months ago #

    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.

  3. johnwmcc
    Member
    Posted 10 months ago #

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

    The (very much new, incomplete, and evolving temporary) site url is http://kiidstrust.dyndns.org.

    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
    #menu-item-39.menu-item.menu-item-type-post_type.menu-item-object-page.menu-item-39 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:

    nav#primary-navigation.site-navigation.primary-navigation
    div.menu-main-container
    ul#menu-main.nav-menu
    li#menu-item-27.menu-item.menu-item-type-post_type.menu-item-object-page.menu-item-has-children.menu-item-27
    ul.sub-menu
    li#menu-item-39.menu-item.menu-item-type-post_type.menu-item-object-page.menu-item-39

    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.

  4. Maria Antonietta Perna
    Member
    Posted 10 months ago #

    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.

  5. johnwmcc
    Member
    Posted 10 months ago #

    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

  6. Maria Antonietta Perna
    Member
    Posted 10 months ago #

    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.

  7. johnwmcc
    Member
    Posted 10 months ago #

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

    John

Reply

You must log in to post.

About this Topic