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.
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.
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>
