2 Bar Header Conflict

Support
#1

Greetings. I’m trying to implement a header consisting of two bars: a top bar for a custom news ticker, and one beneath for a series of custom menus. On desktop, everything works flawlessly, but when switching to a mobile resolution, the content within one of my custom menus completely disappears. I thought it was the code, of course, and looked everywhere for a mistake that could have been made to correct. There wasn’t one. I finally determined it was the top bar, not the code, that was causing the conflict. When it’s deleted entirely, the content shows-up. If I create an empty bar with nothing in it, the content disappears. I’ll attach a screenshot of each scenario. Any help to correct this would be appreciated.

#2

Hello @EdgeWise,

Thank you for the very detailed post information.

Please be informed that Navigation Inline and navigation dropdown are best to use for desktop screens. For smaller screens, you can make use of the Navigation Collapse or Navigation Layered.

As I have checked your header, it turns out that you are using Content Area Dropdown and then you have set the width to 1425 pixels. This would mean that in smaller screens, all the contents were displayed way off the screen width.

To resolve this issue, you will have to insert a Content Area Off Canvas element and insert your custom code. You can then hide the Content Area Dropdown element in smaller screens and only show Content Area Off Canvas element for smaller screens by utilizing the “Hide During Breakpoints” which can be found in the Customize tab for each element settings. To know more about the Hide During Breakpoints option, please check this out:

Hope this helps. Please let us know how it goes.

1 Like
#3

Got it. Makes perfect sense.

#4

Awesome.
If you need anything else we can help you with, don’t hesitate to open another thread.

#5

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