Header formatting questions

I’m having some issues with getting my header how I’d like it to look. On medium to large screens, I have a double stacked menu and then on small - x small screens I have hidden the inline navigation
bar and replaced it with the hamburger icon. Two areas I’d like to improve and can’t quite figure out:

  1. On medium sized screens the buttons inside container 2 of header bar 1 get the text cut off. Is there a way to make the text inside the button adjust size according to screen?

  2. On mobile viewing, the hamburger menu button is below the logo. I’m struggling to find the best approach to include the logo in line next to it.

Hey @KLWink,

What you’re having right now is a spatial limitation. Both on desktop and mobile, there’s only 1 thing that is pushing things around and that is the logo. You should reduce its width using the Image element’s Width option.

If you don’t know yet, you might also pick up some layout knowledge from our Flexbox tutorial here: https://theme.co/docs/use-flex-layout

More tutorials are available in our Youtube Channel and our Knowledge Base

Hope that helps.

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