Header exceeds window

[geraldeder]

Hi,

I am new to PRO headers and i have the problem that my navbar exceeds the window on the right?
see here: https://screencast.com/t/LuQXCzvX
Can you help me fix this ?

ALso, How can i learn about the flex settings?

[rad]

Hi there,

Thanks for writing in.

Hmm, header content is too long but yes, it should at least break down. Please try adding this CSS to your global custom CSS.

.x-bar-scroll, .x-bar-scroll-outer, .x-bar-scroll-inner, .x-bar-content {
    -webkit-flex: auto !important;
    flex: auto !important;
}

Thanks!

[Blockbase]

Hi, Thank for the feedback

I made the content shorter so it looks fine now on widescreens.
However as you can see here: https://screencast.com/t/DPMFuTuC5nAS when i narrow the screen till the mobile display the content moves outside the frame again. And at the end all i can see is the button and not the menu icon anymore. is there a way to shrink all elements into the menu icon?
Any help is appreciated.

Regards
Gerry

[ruenel]

Hello Gerry,

Thanks for updating in! Please edit your header and add a navigation collapsed element next to the navigation inline element. You will need to hide/show both of this element in different screen sizes. Please click the navigation inline element first and find the “Customize” tab. You will see the “Hide During Breakpoints” option. This is what you will use to hide and show the element on the selected screen sizes. You will have to hide navigation inline element in smaller screens and you will also need to hide the navigation collapsed element in larger screens so that you will be having a mobile menu in smaller screens.

Hope this make sense. Please let us know how it goes.