Header Not Responsive on Smaller Screens

How To
1

Hi all, I am new to bricks and have gone through some videos but still can’t get it to work. So I am building a new site and have setup the header on desktop but when I check on mobile, its not displayed or aligned as I would have wanted it. Please see images below

Desktop:

image
image3062×244 23.5 KB

Tablet:

image
image1642×244 19.7 KB

Mobile Landscape: (I had to do some tweaks here but may not be optimal)

image
image1246×275 13.1 KB

Mobile Portrait: (I had to do some tweaks here but may not be optimal)

image
image898×248 12.5 KB

But at 356px width

image
image806×434 14.3 KB

Tree Structure:

image
image880×1595 56.7 KB

Any guide or tutorial would be appreciated.

2

Hi Isaac,
Actually, it behaves responsively, as there is no overflow.

Tablet: the menu contains too many entries and must wrap accordingly

Mobile Portrait: Logo + text is too wide, so the mobile menu toggle breaks into the next line. Make the logo and text slightly smaller so the toggle element has enough space.

Best,
timmse

3

Hi and thanks for the response. If I may ask, is there a video that works through making such menu? Also am I using the correct blocks?

4

As far as I know there is no ‘official’ video, but you can find countless videos on YouTube that show the building process - also for header templates.

The elements are ok so far, but nesting a container inside a container doesn’t make sense. In this case, however, this should not influence your „problem".

Please have a look at the Bricks Academy regarding the layout/layout elements: