styling menus

  • I’m building a child theme and I’d like to style the appearance of the menus. I’m aware that I’m going to use selectors like

    nav li {
    background-color: #123456;
    }

    or maybe

    .menu-item {
    …
    }

    But I’m not sure what selectors I need to include in styling all elements of the full menu and all sub-menus.

    Is there a WordPress reference to menu markup?

    Now, I’ll mention that what I’m doing is building a child theme of the Genesis Framework, but does that change how I would style menus? or are all WordPress menus pretty much the same under the hood?

    Mike

    • This topic was modified 6 years, 2 months ago by michaelmossey.
Viewing 5 replies - 1 through 5 (of 5 total)
  • Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Use a browser developer tool to figure out the CSS selectors to use. Unless you’re styling something new, you will most likely have to override the theme’s styles that are currently being applied.

    Chrome’s developer tools work: https://developers.google.com/web/tools/chrome-devtools/inspect-styles/

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Most of the time you can just copy and paste the CSS that you find in the developer toolbar into your Child Theme style.css file.

    Thread Starter michaelmossey

    (@michaelmossey)

    I’ve been looking at the CSS in Firefox developer tool’s, but there are problems with this approach. I’d really like to know “from first principles”, that is a comprehensive guide to how markup is used in WordPress menus, rather than hack on it. Here are some problems with hacking:

    (1) some things I’m doing SIMPLY AREN’T WORKING even though I’m copying the CSS in the developer toolbar. I must be missing something, but rather than hack on it more, I think I should now look for a reference.

    (2) it’s not obvious what level of generality or specificity to use in a selector … do I make it specific, and then find out later it breaks sometimes? Or do I make it general, and then find out it messes with other parts of the website?

    (3) It’s not obvious from hacking on it when I’ve finally found and handled every situation

    (4) the submenus are dynamic and I can’t figure out whether their markup is changed by JS when they fire.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Do you have a pragmatic example of an issue? I don’t think we’ll have the time to fix the issue otherwise.

    Thread Starter michaelmossey

    (@michaelmossey)

    I was hoping you would know of a reference in a more general sense.

    But, I’ll ask a specific q. Below is the markup for my menus, copied from the developer’s tools window. To keep it short, I omitted some details that I think aren’t relevant.

    One style I want to apply is changing the background color of the menu buttons.

    This worked on the top-level buttons:

    li.menu-item a {
    color: #fff;
    background-color: #18ddb1;
    }

    But the background color of the sub-menus is still white, unchanged from the original. I tried using any or all of the following selectors to add a new background color to the sub-menus:

    li
    li.menu-item
    .sub-menu li
    .sub-menu a
    .sub-menu span

    and similar combinations. Nothing changed the background color of the submenu (although some of them seemed to affect the area right around the text, just not the whole sub menu)

    <nav id=”genesis-nav-primary”
    class=”nav-primary genesis-responsive-menu”>
    <div class=”wrap”>
    <ul id=”menu-mine”
    class=”menu genesis-nav-menu menu-primary js-superfish sf-js-enabled
    sf-arrows”
    style=”touch-action: pan-y;”>
    <li id=”menu-item-??”
    class=”menu-item menu-item-type-post_type
    menu-item-object-page menu-item-??”>

    <span itemprop=”name”> …menu item text… </span>

    <button class=”sub-menu-toggle>
    </button>
    <ul class=”sub-menu”>
    <li id=”menu-item-??” class=”menu-item menu-item-type-post_type
    menu-item-object-page menu-item-??”>

    <span> .. menu item text .. </span>

    </div>
    </nav>

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘styling menus’ is closed to new replies.