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?)