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

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.

Here’s My funny Story Behind This

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. 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 in the menu … 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. 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.

However, I found no good explanation for it (or… I didn’t have the patience to read) so I opened our good old friend “the Developer Tools” (which I should have done in the first place) and I realized my toggle button – on mobile devices – was hidden.

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.

All this to put an emphasis on this: before updating your theme, put your blog on Maintenance Mode. Update the theme and check the main elements (cover, archives, posts, menus) to see if any of your CSS or PHP customization has stopped working.

How the Mobile Menu Works on the Twenty Twenty Theme

When we want to create a drop down menu, we can leave the link of a main item in blank, 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 am one those people)

So, I did the following… just for the fun of it:

• I made the toggle button rounded (so dummies like me will notice one must click on the button!)
• I set the whole wrapper in black (with .menu-modal-inner, instead of just using .mobile-menu .ancestor-wrapper)
• I 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. And I am going to seize the opportunity to show you how we can customize selectors that don’t have an ID: with the :nth-child(n) CSS selector.

I have mentioned before 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)

As I said, 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! Here’s the full design:

/* 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;
}