I can not for the life of me figure out the mobile header. I have tried a few different headers to get a mobile nav bar to work and nothing is working. Please help.
Running Pro 1.1.0
Hi There,
On Pro the mobile header is not automatic, you need to set yourself.
How to do it? On every BAR, Container and Element there is a customize tab. Once you click on the Customize tab you have option to hide based on screen width.
So you need to hide your bar, container or element and add an element that will fit your layout on smaller devices.
You have a couple of elements that can be used as mobile navigation, for example slide in or modal navigation.
Hope it helps
This is honestly a huge disappointment. Do you plan to make the menus scale for mobile in the future or is this a limitation of flex box?
Hi @tprintz,
Thanks for writing around! I’m not sure what you mean by menus scale for mobile? If you’re not creating a blank header, mobile menu is added with all header templates. You can inspect and customize it as per your need.
Hope this helps!
The solutions that have been offered here seem to only be appropriate to a very limited set of scenarios.
I have a situation where I have my header setup to align left (maybe not an important detail here), I have two containers. The top one contains my logo. The bottom one contains both my main menu, and other content. I need a mobile nav that hides all of the content of the bottom container, but reveals all of it when the mobile nav button is clicked. All of the mobile nav options that I can find, such as “Navigation Modal” only give you access to a selected menu item. To my mind, it would be ideal for all bars, containers, and elements, to have mobile options that go far beyond merely hiding or showing them - mostly, we need options to turn them into modal style buttons.
If there is already a way to accomplish what I am after, please let me know.
@fbb, regretfully, this is not a feature currently offered in Pro. It could be possible with custom development but this would be outside the scope of our support. We do have an in-house custom development team that offer paid services, who may be able to assist. They can be contacted at [email protected] if this is of interest to you.
I’ll submit your concern as feature request and if more users request the same thing, it might be added in the future.
Thanks.
The best way to make a mobile navigation is to add multiple elements and configure them to be displayed only at certain breakpoints. This will allow them to be styled independently. It’s also how our examples are setup if you import one of the header templates.