Mega Menu not turning to mobile style on verticle iPad


#1

I cant figure out how to force mobile style (hamburger lines) when ne3eded.

My mega menu is looking good EXCEPT it creates 2 lines on portrait ipad. Instead of becoming mobile style like on iphone. This is a deal breaker and I dont know where im going wrong


#2

This is usually a sign that you have a bit too much in your navigation bar. Horizontal space is limited of course. The mobile toggle is for the mobile breakpoint which kicks in on smaller screens. You’ll want to try paring down the contents of your top level navigation items, shortening navigation items names, that sort of thing. Reorganizing things to make sure everything fits is all a part of responsive web design.


#3

Thanks Adam.

To fix the problem I added a slide navigation stack, I selected hide this stack on desktop.
It looks perfect on iphone and ipad. Really slick.

BUT on my mega menu I selected hide this stack on ipad and iphone … But it still appears on Ipad and Iphone so I have 2 navigations on these. Is there a way I can force the mega stack to hide?
I have tried republishing all files.
It is a Partial and I have selected the hide within the partial and on the page its placed. But no luck. I’d love to get it to work because its a great combination


#4

Are you using Sticky Navigation with Mega Menu? If so that’s why it won’t hide… Sticky Navigation pulls the Mega Menu stack out of its original container to make it sticky. So you’re hiding the original Mega Menu container… which has no effect on the sticky’d version. You can’t hide a Mega Menu with sticky navigation enabled. Same as a Hero banner for example.


#5

Ahhhhh… THANKYOU, Yes it is sticky.


#6

Rats.
I made the mega not sticky

Republished all twice

Cleared browser data on iphone and ipad. But it still insists on being there


#7

When I look at your page I’m not seeing the Mega Menu stack wrapped in a Visibility stack. But maybe I’m missing something. If you want to send me your current project file I will look at it tomorrow to see what might be wrong. When I create a new project file and place the Mega Menu stack inside a Foundry Visibility stack it works as expected, so I suspect the problem is something to do with your setup and not the stack, but I can’t know until I see it.

In fact now that I look at it, it should even work with Mega Menu in “sticky navigation” mode.


#8

Thank you. Your support is truly amazing. I’ll send it over for tomorrow.


#9

You might try creating a new page with just the basics to see if it works for you there first.


#10

I received your project file this morning. The problem is due to the fact that you’re using the Pair with Parent Banner feature. This does what I outlined here. I should have waited until I was at the computer last night to reply as it was late, so I didn’t really take the time to analyze the problem from the iPad. That said, the Pair with Parent Banner feature uses absolute positioning to pair the navigation with the banner. You can’t hide it when doing so.

If it were my site I would choose one type of navigation only and make it work with my content. That is me though.


#11

I cant thank you enough for helping me so fast.
THANK YOU.
O.K I’ll figure out my options.
Again Thank you.


#12

No problem. I’m going to go ahead and close this thread if you’re good to go.