Blogging Update: Toolkits and Issues With Mobile Menu on WordPress

One last “catching up” kind of post, before we go back to customizing the twenty twenty theme for a WordPress blog.

I know, I know… It’s been a month; but, I told you I was going to work on updating this blog!

On my previous update, I sort of set up a schedule of what I’ll be sharing next; however, two things happened:

  • one, what I said: I did work on updating the blog!
  • two, I found an issue with the mobile menu; the subitems wouldn’t drop down on mobile devices. I’ll address this issue today quickly, and post a nice tutorial on Tuesday.

Toolkits Updated!

A lot has changed since I installed a local host on my notebook, so I did it again on my brand new 27″ iMac (I can see now!… or maybe it’s because I also got glasses 🙄. No, seriously: I had Samsung monitor from 2009 plugged to MacBook Pro from 2015… that’s like, Angelina Jolie and Brad Pitt)

Therefore, at the Coding Toolkit you’ll find cool, quick an easy tutorials to:

  • Learn what Sublime Text is, why you need it, how to install it and use it!
  • Learn how to set up a local host in your machine, Step by Step (Ooh, baby) and bullet proof
  • What’s the inspector (your new best friend, in case you haven’t met him)
  • How to create a child theme! bullet proof.

And, at the WordPress Toolkit:

  • links you must (please, please) read to learn the fundamentals of WordPress
  • the plugins I use and recommend

And, about the Blogging Toolkit… just…

What’s the Issue With the Mobile Menu?

When I noticed that after clicking on a link, on a mobile menu, the sub items wouldn’t drop down, I checked it on a browser and saw it was working there; so, why not on mobile devices?

Screenshot of Menu on Browsers

Before using the freaking inspector (my bad) I went gaga searching on wordpress.org/support and WP Stack Exchange to see if someone was experiencing the same; and…, there was a lot of people saying there has been an issue after a WordPress update, but I didn’t have the patience to go through it all so I opened the inspector.

Once again: my bad. When I changed the hex colors of the mobile menu, I hid the border of the toggle button (leaving just the arrow to say, “hey, there’s something here”) and then I forgot it existed. Why did I change it? For two reasons:

  • I don’t like it 🤷🏻‍♀️
  • The main link was a “#” (or just left in blank), so people could click on it to open the submenu instead of going to “a link” per se.

I’d put my hands on fire saying that when I started customizing this theme (on Jan 2020?) the mobile menu worked that way; but, I may be wrong.

Bottom line is, on Twenty Twenty:

  • the parent item, on a mobile menu, won’t drop down even if you set the link as “#”, because,
  • the theme has a toggle button for that purpose.

It does work on a browser, because we can hover the parent items; but, can we hover on a mobile device? Nope!

Huge Advice: Keep Track of the Updates and Use the Google Search Console

So, first: every time you update WordPress, your theme, even your plugins:

  • read what’s new;
  • go through your blog, on different devices, to see if anything looks odd.

Second, a nice way to have control over this is by using the Google Search Console. Why? Because it will send you email alerts when Google identifies issues on your blog or website; it will tell you which URLs are affected and how, so you can fix it; and it will also tell Google when you’ve fixed them.

The Search Console has been updated a few months ago and it looks awesome; super easy to use! So if you haven’t dig into that yet, please do it.

Last but not least: regarding the Search Console, I’ve been using for a while the plugin “Site Kit, by Google” (as I mentioned in my previous post) which lets you have an overview of the search console, google analytics and google Adsense in one place: your WP admin dashboard. Hashtag super awesome.

And, that’s a wrap for today! I hope you enjoy the toolkits! See you on Tuesday to play with CSS only and that freaking top menu.

Any thoughts?