Flexbox Headers Overlapping in Mobile

I am trying to build a header in Pro with two header bars, so two bars stacked on top of eachother, containing one container and and one element each. I cant figure out the proper flexbox settings to get my headers to display properly in a mobile view. Container one (top hero bar) has a fixed hight which i think is causing the issue. When displayed in mobile, half of bar one is hidden behind bar two (navigation menu below).
I think I need bar one’s height to adjust to display its container to make it responsive.

Hello There,

Thanks for writing in! Because your headline text in the first bar has a large font, it breaks down into two lines in smaller screens and push the sub headline title to the bottom behind the 2nd bar. You will need to at least reduce the font size in smaller screens. You must apply responsive text to your headline text and manage it in Settings > Responsive Text. To know more about responsive text, please check it from our knowledge base here:
https://community.theme.co/kb/shortcode-walkthrough-responsive-text/
http://demo.theme.co/integrity-1/shortcodes/responsive-text/

Hope this helps.

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