660 slots for sale,SpinPlay Games.Recharge Every day and Get Bonus up-to 50%!

Reply To: styling menus

Andrew Nevins — Wed, 02 Jan 2019 00:13:06 +0000

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/

Reply To: styling menus

Andrew Nevins — Wed, 02 Jan 2019 00:14:15 +0000

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.

Reply To: styling menus

michaelmossey — Wed, 02 Jan 2019 00:27:44 +0000

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.

Reply To: styling menus

Andrew Nevins — Wed, 02 Jan 2019 00:30:47 +0000

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

Reply To: styling menus

michaelmossey — Wed, 02 Jan 2019 11:22:21 +0000

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)

class=”nav-primary genesis-responsive-menu”>

class=”menu genesis-nav-menu menu-primary js-superfish sf-js-enabled
sf-arrows”
style=”touch-action: pan-y;”>

class=”menu-item menu-item-type-post_type
menu-item-object-page menu-item-??”>

…menu item text…

menu-item-object-page menu-item-??”>

.. menu item text ..