Customize Hex Colors on Twenty Twenty Theme’s Mobile Menu. Plus: The CSS nth-child Selector and the Color Wheel

A colorful mobile menu for the Twenty Twenty Theme, as we learn more about the CSS nth-child Selector and the Color Wheel. Fun time!

Here’s what happened and what I’m gonna do in this post:

  • what happened: the toggle button in the mobile menu disappeared (which led me to think there was “an issue”);
  • what I’m gonna do: I’m gonna give you two different mobile menu’s looks, so you can have fun and learn a little bit more about CSS and how to match colors.

Laly’s Story

I was at my house the other day with a friend, and he asked me to show him this “nkotb.blog” I wouldn’t stop talking about; so, I grabbed my iPad, scrolled over the cover and I opened the mobile menu to show him all the other amazing things the blog has!

This person, who knows nothing about blogging or coding was in awe, so I was pretty much containing my ego while taking the compliments like a cool human (which is very hard from someone coming from Jupiter, you know)

But, when I clicked on a main item … it didn’t freaking open…

Updates to the Theme Matter

As I said in my latest blogging update, I’m pretty damn sure it used to drop down… So, first I thought, “When did it stop working?” and later I began digging on the WordPress forums to see what was happening.

And, there was an issue in fact; after a WordPress update, the parent item on a mobile menu wouldn’t open. But, I found no good explanation for it (or… I didn’t have the patience to read) so I opened the good old friend: “the inspector,” and I found my toggle button – on mobile – was hidden.

default look
my issue (toggle button is missing)

Last year, something like this happened; after a theme update the headings of the archive pages were gone. It happened at How to Customize Your Archive’s Titles With CSS Only, And the Use of The “Before” and “After” Selectors, which is now updated. 😉

So, as I said before: always, always read what the update changed and go through your blog on different devices.

How the Mobile Menu Works on the Twenty Twenty Theme

When we want to create a drop down menu, we can leave in blank the link area of a main item so if someone clicks on it, the submenu will open without taking the person to any link.

When we are on a computer, we hover this main item and the submenu drops down.

But, on Twenty Twenty’s mobile menus, that doesn’t work because it has a toggle button for that purpose: the little arrow next to the menu’s parent item.

Honestly, I don’t know which selector was added or removed, because when I noticed the toggle button was gone I went insane and started it from scratch.

Selectors For a Mobile Menu in Black and White

I bet most people will likely click on the link instead of the button, because there is a link! and it all looks like the same thing! (I did it 🤦🏻‍♀️) So, I did the following… just for the fun of it:

  • made the toggle button round (so dummies like me will notice one must click on the button! 🥴)
  • set the whole wrapper in black (with .menu-modal-inner, instead of just using .mobile-menu .ancestor-wrapper)
  • changed the colors of the social icons

The following screenshot has only the selectors you need to customize the hex colors for your mobile menu.

Selectors For a Colorful Mobile Menu

Since we’re at it, I thought about playing more with CSS and the color wheel. I mentioned in the second blog update that I am not good (at all) at matching colors, and that learning to design with Canva has been game changing. One of the things I appreciated the most, was to remember there’s a color wheel! (Do we learn that in first grade? 🤔)

For the following menu, I went to Canva’s Color Wheel, and I picked a random pink. Then, as you’ll see in the gif, one can choose different color combinations; I chose the triadic.

Fun! Right?

Next, I made a colorful mobile menu with the palette! (please don’t judge 🤦🏻‍♀️)

What I wanted to add, regarding CSS, is how we can customize selectors that don’t have an ID: with the :nth-child(n) selector.

In the example, I chose to highlight the “contact” link; since it’s the fourth element in my .mobile-menu li, I used:

.mobile-menu li:nth-child(4) {
	background-color:#fb64c1;
}

Cool, huh?

Ok. That’s it! Have fun! 🤗

/* Colorful Mobile Menu */
/* Mobile Menu bg */
.menu-modal-inner {
	background-color:#64c1fb;
}

/* Close menu text plus x */
.toggle-text,
.menu-modal .svg-icon,
/*links in mobile*/
.mobile-menu a,
.mobile-menu .sub-menu a {
	color:#c1fb64;
}

/* hide arrow's left border */
.mobile-menu .sub-menu-toggle {
	border:none;
}

/* The Toggle Button*/
.mobile-menu .sub-menu-toggle {
	background-color:#c1fb64;
	border-radius:2em;
	padding:1em;
	margin-right:0.7em;
}

/* the arrow */
.sub-menu-toggle .svg-icon {
	color:#fb64c1;
}

/* social icons bg */
.social-menu a {
	background-color:#fb64c1;
}

/* social icons */
.social-menu .svg-icon {
	color:#c1fb64;
}

.mobile-menu li:nth-child(4) {
		background-color:#fb64c1;
}

Any thoughts?