How to split or combine menus?

Support
#1

Im using PRO / Header Bulider.

In desktop view, I have the logo in the center of the navbar. One menu with three items left of it, another menu with 3 other items right of it. Perfect. But I’d like to use a hamburger menu on mobile devices. Is there any way to combine the two menus (left and right) into one hamburger menu? Or to do it the other way round, to have a big menu with 6 items and to have them displayed left and right of the logo?

Best regards

Uli

#2

hey! if you’re using the pro header builder, its pretty simple. In menus, create another menu called for example ‘mobile’ and combine the pages. Then in the header builder, Add another container, and select navigation modal for your element. In the navigation Modal settings select the mobile menu.

Hope that helps!

#3

Thank you for the help here @britxerin!

Hi Uli,

Yes, @britxerin is correct. Definitely possible using the header builder.

1.) On Appearance > Menu please create another menu. This time add all links here. The combination of the content of menu left and right.

2.) We can hide your existing menu on mobile view using HIDE DURING BREAKPOINTS.

3.) Add the Nav Collapsed or Dropdown, choose the menu you have created with the combine content. Use this again: HIDE DURING BREAKPOINTS to hide it on desktop.

For more detailed guidance, please subscribe to our youtube channel.

#4

Hi britxerin and Lely,

thank you for your help. If I add another menu, it would be redundant data and every change in the navigation would have to be done in bothe menus, correct?

If there is no other way, I will have to to it this way.

Best regards

Uli

#5

Hey Uli,

With the current implementation, yes you’ll have to make changes in both menus because, for the desktop menu you’ve added two separate menus and there is no other way to combine both these menus to a single menu in mobile devices but to create a new menu with all the links.

There is another workaround to have one menu for both desktop and mobile devices, in this method the logo is added as a menu item in the center and then customized via CSS (for making it an actual logo), you can take a look at this thread https://theme.co/apex/forum/t/center-logo-in-the-middle-of-the-navbar/63256/2

Hope this helps!

#6

Hi Nabeel,

hey, adding the logo as a menu-item is a great Idea - I’ll try this out! Very cool!

Best regards, have a nice day!

Uli

#7

You’re most welcome, Uli.

#8

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