Color for you, Color for you…

Color for Everyone!

I floated a question on the Elegant Themes User Community Facebook page asking what kind of tutorial people would like.The first response I got was asked if I could do one on having the background of the menu item change on hover – so, here you go!

The header picture at the top of the post shows the final menu with color added to each of the menu components. As a heads-up, I selected colors that would show clearly, not necessarily for their UX properties! Okay, so what did we start with?

Plain old Divi menu
The standard Divi menu in all its pasty white glory.

So, the first thing we have to do is identify what elements we need to change. To do this we can use the developer’s tools that are built into a number of modern browsers. I’m using Google Chrome (I know, I know, I should switch to firefox with their way cooler tools) on a mac, so I’ll press ⌘-⌥-i (command-option-i). I’ll leave it up to you to find the right keys for your browser/computer combo. Using the tool to inspect the menu items I see that they are all inside an unordered list (<ul>) with a class of “top-menu”. So, let’s switch to the CSS sheet in our child theme.

Naughty child being scoulded.
Use a child theme next time, or it’s a good caning for you little Johnny!

So, the first thing we will do is add a base color to all of the menu items. This isn’t necessary, but it helps us visualize the block we will be changing during the hover state. Again, I could use the specific ID of the menu items. For the first menu item, the inspector reveals an ID of “menu-item-2257”. We could target this in our css using #menu-item-2257{…styling…}. Instead, we are going to use parent:child selectors. 

 Okay, so in the CSS to the right, what is going on? Remember that I said that the menu has a class of “top-menu”. First we specify this, next we tell the browser that we want to target the first list item (<li>) under the <ul id=”top-menu”> using the :first-child selector. Once we have that DOM element targeted we can add a background. Now that we have a background set (remember this is optional) we can set a hover state. 

Tutorial CSS

We do this by adding the :hover pseudo-class after the tag we want to monitor. The styling rules that we enter will be implemented whenever the user’s mouse enters into the targeted element. Simple!

Moving on to the next menu items, we can target it using another selector, the nth-child() selector. As the name would suggest, this allows you to target a specific child of your parent DOM element. So, to target the second menu item we insert “2” into the selector, for the third, “3”, and so on. Much like the first-child, we can now enter background styling, as well as styling for the :hover pseudo-class.

Optional neatening

Okay, that wraps up the whole question about changing background on menu item hover. For the sake of completeness, I want to also show you a little more CSS I used to neaten things up.

Plus, I want to show you two other neat selectors you could use to “automate” your background coloring.

If you were to implement the CSS as is above, you would discover that the text isn’t really centered up in the <li> elements. So the first thing I did was readjust the padding and margin to center things up. Please realize that this jiggering will be on a case-by-case basis and may interfere with the normal Divi menu shrinking and swelling. To decide on the values I used the inspector tool to determine the values that Elegant Themes was assigning to menu items (<li> padding-right: 22px; <li> <a> padding-bottom: 30px;). So I just split the values in half and put them on each side of the element. Plus I added a margin-right: -4px; to eliminate the gap between menu items.

Depending on colors used for the background of each of the menu items your text may not be visible. In my case I’m using darker colors, so I would like a light text. I could change this universally using the normal Divi theme customizer. However, since I didn’t change the color of the search icon background it would disappear. So instead I added color: #fff; to all of the links to change the text to white.

Finally, I added some top margin to the search icon to get it centered up with the rest of the menu items.

The nth-child() selector also allows you to use two keywords, even and odd. As you would expect, this allows for the selection of every even or odd numbered child, respectively. Using this type of selection, we don’t have to worry about how many menu items we add, as long as we are okay with alternating colors.

Alternating color CSS

As you can see, we get a nice alternation of colors. If you were to hover over the elements you would also see that each changes color based on whether it is even or odd.

This tutorial is already overly long, so I won’t go into the neat math that you can put into the nth-child() selector (even = 2n+0, odd = 2n+ 1, 3n+4 = child elements 4, 7, 10, 13)!

Hope this tutorial helps someone out there, either with Divi or beginning to understand parent:child selectors. Let me know if there is something you need clarified or if I’ve made a mistake (I’m relatively new to Divi). Metta!

Note that the link above to Elegant Themes uses my affiliate tag. Any membership you buy from them will provide an affiliate payment to me, but will not impact the price you pay in any way. Additionally, the Amazon ads you see are also affiliate ads, which again, pay a fee to me, but don’t impact how much you pay for the item.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.