Topic: problem with sticky menu on Max Mega Menu

qpaq
April 9, 2025 at 12:08 am

Hi,

I use MaxMega Menu on GP with a sticky option. It works well on desktop however, on mobile devices I realised that the height of the navigation bar increases. There is a padding or margin somewhere I guess but I couldn’t find it.

1st question: How can I ensure that the height of the mobile navigation is as small as possible?
2nd quesiton: Can I make the sticky navigation on mobile menu turn off. I couldn’t find a way to do it via GPs own setting because I use Max Mega Menu and maybe they conflict with each other.

Thanks.
Ying
April 9, 2025 at 9:04 am

Hi there,

The topic is marked as resolved. Do you still need help?

If so, can you link me to your site where I can see the menu?
qpaq
April 9, 2025 at 9:12 am

Hi Ying,
I must have marked it wrong, I still need help please. Link is included below in private area:
Ying
April 9, 2025 at 2:37 pm
1. You have this CSS, is this added by you? If so, you can reduce the max-height value.
```
@media only screen and (max-width: 768px) {
    #mega-menu-wrap-primary #mega-menu-primary {
        max-height: 400px;
        overflow: auto;
    }
}
```
2. go to customizer > layout > sticky navigation, set it to Desktop only instead of On.
qpaq
April 9, 2025 at 10:57 pm

Hi Ying,

Thank you but I think this css is required to limit the maximum height of the mobile menu to 400px. If the content exceeds this height, it will not expand further, preventing the menu from taking up too much vertical space on small screens. Is it really related to the navigation bar’s behaviour?

I did also turned off sticky menu on mobile and leave it only on desktop but still I see the sticky navigation bar above the screen.

I also couldn’t find which css is actually making the transition from regular normal logo to stick logo where it slightly expands in size on mobile.
Alvind
April 10, 2025 at 6:18 am

Hi there,

When you mentioned the height of the mobile navigation, is this what you’re referring to?
https://cln.sh/yrNVZBr4

If that’s the case, the CSS snippet Ying provided should help reduce the height by adjusting the max-width value accordingly.

As for the sticky navigation — if it’s set to “Desktop only,” the mobile menu shouldn’t be sticky. I haven’t used Max Mega Menu myself, but is it possible that it’s interfering with the sticky navigation behavior?
qpaq
April 10, 2025 at 12:41 pm

Hi Alvind,
Thank you for your message but I was mentioning the height of the mobile navigation bar. (Marked green on the SS below)

https://drive.google.com/file/d/1hXDLDDQInnaQzCwWJEPmItjbZOb0IuM-/view?usp=sharing

I want that bar height to be minimum when visible and disappearing when scrolled down and remove that transition effect which makes the logo large and small when scrolled up and down.
Ying
April 10, 2025 at 1:45 pm

The sticky nav is enabled on mobile as well. If you are sure that you’ve set sticky nav to only on desktop, does any cache need to be flushed?

If flush cache doesn’t work, can you enable mobile header at customizer > layout > header to see if that works better for you?
qpaq
April 11, 2025 at 5:26 am

Hi Ying,

I think I’ve solved it partially. The nav is set to be sticky only on desktop. And I turned off the mobile header. And hide the off-canvas menu toggle by the following css.

.main-navigation.has-branding .menu-toggle, .main-navigation.has-sticky-branding.navigation-stick .menu-toggle {
display:none;
}

Now the mobile menu nav bar’s height is less, and works well. However it’s still sticky on mobile. I wonder if there would be a solution to hide it on mobile devices by a couple of CSS lines.
Ying
April 11, 2025 at 9:44 am

However it’s still sticky on mobile. I wonder if there would be a solution to hide it on mobile devices by a couple of CSS lines.

I would not recommend fixing that with CSS; We need to find out the root cause. If the settings are correct, the sticky should not apply to mobile.

Do you mind sharing your site credentials so I can take a look at the backend?
qpaq
April 11, 2025 at 9:52 am

Certainly. I added the login details below in private info box.
Mind you that this is a live site, so if anything breaks we need to roll back.
Many thanks.
Ying
April 11, 2025 at 11:50 am
I think the issue is related to the mega menu, GP can not recognize the nav as mobile nav on mobile, it still treats the nav as desktop nav even though it’s on mobile.

The current option is to activate the mobile header at customzier > layout > header, and use this CSS to hide the default menu toggle:
```
#mobile-header button.menu-toggle {
    display: none;
}
```
qpaq
April 11, 2025 at 12:16 pm

Hi Ying,

Many thanks. That resolves the problem as you’ve said. Much appreciated.
Have a nice weekend.
Ying
April 11, 2025 at 12:23 pm

You are welcome 🙂

Viewing 14 posts - 1 through 14 (of 14 total)

You must be logged in to reply to this topic.

Are you a GenerateCustomer?

Just browsing?

problem with sticky menu on Max Mega Menu