Having trouble making a responsive menu in PRO header editor

[taotaoli]

Hi friends,
I have a staging site set up at http://159.203.166.174/ and I’m using the PRO header editor to create the menu. I’ve recreated this menu based on my previous settings from X, however, I didn’t start with a mobile-first approach and now I’m having difficulty making this menu responsive. Any tips or advice to help accomplish this would be greatly appreciated.
Thanks,
Andy

[rad]

Hi there,

Thanks for posting in.

What page has the header built from Pro header builder? I checked and it still uses the standard header which is already responsive.

But the idea is having two menus (inline menu and navigation collapse), the inline-menu is visible in desktop but hidden in mobile. Then the navigation collapse is hidden in desktop but visible in mobile.

You can control the visibility of each element by inspecting them and toggling on the Hide During Breakpoints options under Customize section.

Thanks!

[taotaoli]

I forgot that I turned it off. I’ve assigned it to global. Can you please take another look?

[alexander]

I see you have a few elements that don’t appear quite right on mobile. Rad’s pointed out some things above on how to address that.

The way that offers the most control is by toggling the visibility of certain elements depending on breakpoint. For example, what you have now hides the inline navigation and shows the off canvas navigation. Try this:

Inspect the Container element around your Search. Go to the “Customize” tab and toggle it to be hidden at tablet sizes and below. Do the same for the “Call Us” message container and the container around the social icons. What you should be left with is the “Free Shipping” message is the only thing that shows on mobile. You can customize these visibility settings however you want.

You could also add an entirely different bar for mobile and have it hidden on Desktop. It could hold the same types of elements, but gives you full control over their appearance.