Header Builder in Pro

[mcaravaglia]

I notice when I build something in the header builder, it is not responsive. Do I need to do many Media queries to make this work correctly?

[Prasant]

Hello @mcaravaglia,

Thanks for writing in!

Well all the elements in header builder are responsive in nature. However, if you are referring to navigation inline element, then for mobile breakpoints I would suggest you to use the mobile menus that header builder offers.

So here’s how you do it:

• Let’s say on desktop you want to show Navigation Inline element. Add navigation inline element and inspect the same. Under Customize > Setup > Hide During Breakpoints select all except for the Desktop icon. So essentially you are telling the system to hide the navigation inline element on mobile and tablet devices and display only on desktop screens.

• Next, for mobile or tablet devices you just need to repeat the above steps only changes that needs to be done is in Hide During Breakpoints select the relevant screen size icon. That way you can have different navigation for different screen sizes.

To learn more about hide during breakpoint, please refer following post.

Hide During Breakpoint - Explained

Thanks.

[mcaravaglia]

Thank you.

[jade]

You’re most welcome, @mcaravaglia.