Menu and header setup in Pro

Hello.

I started to work with Pro recently… can’t really get things to work the way I need them to :(… feeling very frustrated. I’d really appreciate your help!

  • Trying to set up the menu under the logo (please see attached link), but I don’t know how to make it turn to a “mobile menu” once viewed on a mobile device… tried a million things and it just doesn’t work

Looks great on desktop but not on mobile. Can you please help?

Sorry. I should add that I want the logo to stay at the center of the page, even when viewed on mobile… the idea would be for the menu to turn to a “mobile menu” once viewed on mobile devices. Thanks!

Hi There,

Please make sure your container is setup like this screenshot:

Hope it helps :slight_smile:

Thank you very much Thai!

That fixed the issue with the logo… but how do I make the current menu, turn to a mobile menu once viewed on mobile?

I really appreciate the help. Going nuts here. Thanks!

Hi Jack,

For Pro header menu, you will have to use two elements which are Navigation Inline which you currently have and then Navigation Collapse element.

Basically, the Nav Inline element will be the menu that will show on desktop and the Nav Collapsed will be for mobile.

First. you will have to add both elements in the header then set the Hide During Breakpoints option of both element where the other will be hidden on desktop and the other will be hidden on mobile.

Please see this video for the guide:

Hope this helps.

Thank you very much! I was able to include the other menu.

Now, on desktop you’ll notice that the logo is centered, but on mobile it moves to the left. How can I make the logo stay centered regardless of what device the site is viewed on? Please see included attachments.

Thanks!

Hey @Jacko_Pinto,

I see you have 3 containers and the left and right ones are empty. Please remove them (see Secure Note for the result). For more tutorials, please check our our Knowledge Base.

Thanks.

Thank you very much for all your help! One last thing… is it possible to center the menu for Collapsed navigation? Or does it always have to be at the left or right?

Thanks!

Hello @Jacko_Pinto,

Thanks for updating the thread. :slight_smile:

Please do the following to center align collapsed menu:

  1. Select Fill Space under Container > Self Flex.
  2. From Container > Flex Layout > Horizontal select Center.

I have recorded a screencast that you can take a look. https://cloudup.com/c3W-fvh1rbL

Thanks.

Thank you very much for all your help! Best regards.

You’re welcome! :slight_smile:

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.