Pro Header placement and responsive

Support
#1

Hi There

I have watched the video that you have and am ok on doing most headers now but I have one that needs two lines. I have created what I want it to look like BUT

  1. The whole header is to the right of the content rather than over it.

  2. It is not responsive and on anything other than a full screen it looks aweful.

I am sure that its just a setting to get both of these things right but I would really appreciate you having a look as I have gone over and over and tried lots of things but cannot get it right.

Thank you.

Kind regards

#2

Hi there,

Thanks for writing in.

They are custom headers and you’ll have to make them responsive, it’s not automatic since it’s custom. With this, you’ll have to utilize the Hide during breakpoints option. Example, you can have a header bar for desktop and make its content and layout looks great for desktop view, then inspect that header bar and go to Customize section and toggle Hide during breakpoints on to hide it from mobile. Then, create another header bar for mobile and make its layout and content stack altogether (vertical layout) then simply hide it from desktop.

With this, you’re displaying different layout and content for each device. The Hide during breakpoints is available for every header, footer, and content, layout, and elements. So example, instead of hiding the entire header bar, you can simply hide the element, like inline navigation is displayed on desktop but hidden on mobile, and collapse navigation is hidden from desktop but visible in mobile.

There are many elements that you can utilize, some are made for mobile and some for desktop. But you still need to utilize the Hide during breakpoints since the system can’t automatically assume what’s the counter element for each (like inline navigation, what its equivalent menu element for mobile?)

Thanks!

#3

Hi Rad

Ahh I get it thanks.

What about the position - At the moment everything is not centered over the page but all to one side so how can I remedy that.

Many thanks.

#4

Hi there,

You can utilize the Flex layout of your header bar or header bar container, and you can change it’s horizontal alignment to center instead of End.

Thanks!

#5

Doh ! I just knew it would be something simple :slight_smile:

Many thanks Rad.

#6

You’re most welcome!

#7

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