[Resolved] Mobile Nav Menu Toggle not working

[Tiffany]

I noticed that for my mobile version that if I expand the toggle of a main menu item, the main menu item below it disappears (it doesn’t move down and is instead hidden by the expanded submenu items). My website is:
http://www.kampuskompass.com

[Tom]

It seems you’re using an old version of GeneratePress – the mobile dropdown behavior has been improved lately.

It also seems that you’re using some sort of minifying/caching plugin – while these can work great, they can also cause issues.

Update to the latest version of GP and see if that fixes it – if not, we’ll take a look at some other possible causes 🙂

Thanks!

[Tiffany]

I’m using version 1.2.8, which is the latest available version.
Just in case, I deleted it and reinstalled it.

I do have a custom child theme, but there aren’t any functions in functions.php.
Style.css just fixes the sizes of menu icons and the appearance of the word “Menu” at the top.

I tried it again after temporarily disabling all my plugins, using an empty style.css for my child theme, purging the cache of my site, and pausing my CDN (Cloudflare). It still didn’t work 🙁

[Tom]

I just took a look with my screen reduced and on my phone – your menu seems to be functioning perfectly. When I touch the dropdown icon, the sub-menu appears and pushes the below parent items down.

Let me know if you’re seeing something different.

[Tiffany]

The parent items do move down on my screen as well, but the toggle/arrow for the parent disappears if the parent item above it is expanded. For instance, the first 2 parent items with submenus are “Transportation” and “Directory.” When Transportation’s submenu is displayed (the toggle is selected) there are 3 submenu items, but the toggle for Directory has disappeared and will not reappear unless Transportation’s submenu is closed.

Just in case that was confusing, I’ve added 3 screen caps below:
1. Unexpanded (everything that has a submenu has a toggle/arrow to show the submenus)

2. Expanded Transportation’s submenu (Directory no longer has an option to show its submenu)

3. The location of Directory’s toggle (Using Chrome’s Inspect Element)

[Tom]

Hi Tiffany,

Looks like the screen caps never made it?

Would definitely be good to see 🙂

[Tiffany]

Sorry,
I don’t know why the screen caps aren’t showing up, so here are the links to them:
1. Unexpanded: http://www.kampuskompass.com/unexpanded.png
2. Transportation expandedhttp://www.kampuskompass.com/expanded-transportation.png
3. Hidden Togglehttp://www.kampuskompass.com/directory-toggle.png

[Tom]

All of those links gave me an “Access Denied” message.

[Tiffany]

Really, really sorry about that. I just started learning how to use Cloudflare and didn’t know that it would block access to my images for other IP addresses. I’ve disabled the setting for that and followed their instructions for allowing access to my images (test-images/hotlink-ok). Tell me if this works.

1. Unexpanded: http://kampuskompass.com/test-images/hotlink-ok/unexpanded.png
2. Expanded: http://www.kampuskompass.com/test-images/hotlink-ok/expanded-transportation.png
3. Toggle’s location: http://www.kampuskompass.com/test-images/hotlink-ok/directory-toggle.png

[Tom]

Ahhh, I see the issue. Nice find! I’ll look into a fix for this ASAP.

[Tom]

Alright here’s the fix (you can remove the below in the next version as it will be fixed).

Add this to your CSS:

@media only screen and (max-width: 768px) {
	.main-nav .sf-menu > li {
		clear: both;
	}
}

[Marin Goleminov]

Hi there,

I’m working on a clients website and also have a problem with the mobile menu: it doesn’t show up. Can You please have a look here?

http://www.urianek.at/site/

Regards, Marin

[Tom]

Hi Marin,

You have this in your child theme style.css file:

@import url("../generatepress/style.css");

If you remove it, you should be good to go 🙂

[Marin]

Thanks, Tom.

I thought that was necessary when using child-themes… Anyway, everything looks fine and the mobile menu is working again 🙂

Regards, Marin

[Tom]

Using @import is generally frowned upon these days – it has performance issues. GP includes the parent theme’s style.css file in a much more efficient way 🙂

[Author]

Posts