Two Header Navigations (Inline) in Mobile View

Support
#1

Hi there,

What steps do I need to take in order to make this header/menu set up mobile compatible? How do I get the hamburger when in mobile view for both menus?

Also, how do I make sure the middle container with my logo is always in the centre?

Thank you!

#2

Hi @artthescience,

Thanks for writing in!

As you are using Pro header builder, you can make it easier.
Please follow the steps.

1. Create another menu (Appearance -> Menus) with all the items from both the menu. Name it mobile menu.
Edit the header in header builder and hide both the menu left and right in the mobile device.

2. Then you can add any mobile navigation like navigation modal, Navigation layered as per your choice.

Then chose the mobile menu there.

3. Heide the menu elemnt in larger screen.

Hope this helps!

Thanks

#3

Oh that’s brilliant! Thank you so much. Any idea how to make sure that the middle container with my logo is always perfectly centred for the larger display screens? :slight_smile:

#4

Hi There,

You can set your Containers self flex to Fill Space Equally then set the center container’s Horizontal flex layout to Center, the right container to start and left container to end



Hope that helps,
Cheers!

#5

Thank you, it didn’t quite work. When in mobile/tablet view the logo gets obstructed by the two containers (see it gets cut off on the right hand side?). Thank you for your help!

#6

Hi @artthescience,

Thanks for writing in again!

Please set the flex layout of each three containers like the screenshot here.
Let us know if that works.

Thanks

#7

That’s perfect! Thank you. Would you mind explaining why the previous suggestions didn’t work and why this one does? :slight_smile:

#8

Hi,

For a detailed explanation on how flex works. Kindly refer to the link below

Thanks

#9

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