[Support request] Issues with Changing Mobile Header Breakpoint when NOT Slideout Menu

[Vin]

Hi there,

I’m trying to change the mobile header breakpoint to as high as 1023px using the following code example:

https://gist.github.com/generatepress/282078076cd8631c17717d5b8640c043

First, it wasn’t expanding the menu at all. I’m not using the slide-out-menu, so I figured I had to replace it here:

.main-navigation:not(.slideout-navigation) .main-nav > ul {
            display: none;
        }

changing this to

.main-navigation:not(.mobile-header-navigation) .main-nav > ul {
    display: none;
  }

Now the menu does expand, BUT it also displays it when not expanded, with the items next to each other.

You can check what I mean at the URL (only visible to admins).

So there must be something else I need to add. Any ideas?

Thank you so much.

[Vin]

One more note: The problematic screen width range is from 769px to 1023px, so anything above the standard breakpoint. Below the standard breakpoint everything seems to be fine.

[Leo]

Hi there,

Can you try using the code without changing anything?

It shouldn’t matter if you are using the slideout navigation or not.

Let me know 🙂

[Vin]

Hi Leo,

I tried that before, but then the mobile menu wouldn’t expand at all. I changed it back to the original code now, so you can have a look.

Thanks so much.

Kevin

[Leo]

And the mobile menu works fine without the code?

[Vin]

Correct. You can check now (removed it).

[Leo]

Hmm weird. Can you add the code back in so we can have another look?

[Vin]

Hi Leo,

just added the code back in. Now the mobile menu doesn’t expand upon clicking.

Hope you can find the issue 🙂

Thanks,
Kevin

[David]

Hi there,

with your @media (max-width: 1023px) query you have this CSS:

.main-navigation:not(.slideout-navigation) .main-nav > ul {
	display: none;
}

This is hiding the drop down.

[Vin]

Hi David,

thanks! I removed it and it does activate the dropdown. This is similar to what I tried in my first post. But then I get the other problem again: Between 789 and 1023 px the menu items now appear even when not expanded, but next to each other.

[David]

Try using this CSS to hide the horizontal nav at that range:

.main-navigation:not(.toggled) .main-nav > ul {
	display: none;
}

[Author]

Posts