One page navigation - cell phone display

[ej4]

Hi,

When navigating on my cell phone the menu doesn’t appear properly. You have to scroll sideways to find all the tabs. It seems a little weird to me. Can you please help.

Thanks,
Elly

[nabeel]

Hi Elly,

Thank you for reaching out to us. I believe you’ve not added a mobile menu, I see you’re using Pro Header so you have to manually add the mobile menu in your header. To do this add a new Bar in your Header Builder let’s say Mobile Bar (see screenshot)

Then add a Container and in Elements section add a Navigation Collapsed element (see screenshot)

Then inspect your Mobile Bar and go to Customize tab and hide it for large screens (see screenshot)

Now you need to hide the desktop menu in smaller screens, to do this repeat the above process for Desktop Bar and hide your desktop menu in small devices.

Let us know how this goes!

[ej4]

Thanks - I will try this out.
Can you pls remove the url for the site in my original message? I can’t edit my message and it’s coming up when I google the site.

[prakash_s]

Hello Elly,

We have removed your site URL from your message. Please try the suggestion as suggested by @nabeel and let us know how it goes.

Thanks

[ej4]

Thanks
I’ve done what you said by adding a mobile menu - it works. I was however hoping to use the inline navigation and have it wrap or so. I only used the collapsed version as a ‘backup’ since the inline wasn’t wrapping on the phones.
Is that possible?

Thank you!

[ruenel]

Hello Elly,

Be advised that the Navigation Inline and Navigation Dropdown element are best to use for desktop screens since it is wide enough to display the menu items. In smaller screens, we highly recommend that navigation collapsed, navigation layered, and the navigation modal element.

Best Regards.