Auto-sizing/Formatting Global Header to Fit Any Screen Size and Orientation

I have already created a Global Header template for my website. However, it seems that for every device, I keep running into formatting issues regarding the placement of where the logo, search, and hamburger menu reside. And this ranges between the following views: Desktop, Tablet, Mobile (landscape), Mobile (portrait). Is there a way or a setting that I can use to ensure the proper re-sizing for the Global Header to look uniform across devices and screen sizes? So that I do not need to fine tune the positioning of every element on every single possible screen size?

The current positioning method being used for the Global Header is: static. If that provides more context to my issue.

If the site header is complicated, then in practice it is almost impossible to make an adaptive header for all devices. Breakpoints can be divided into: large screens, standard screens, laptops, tablets and smartphones. Ideally, you should create a separate header template for each such group.

The forum has already discussed many times the possibility of completely disabling elements on the frontend. For example, we make a header for the desktop and show it only on desktops. We disable it in other groups. We make our hats in them.

We are waiting for the developers to pay attention to this :slightly_smiling_face:

We have made a temporary solution for our projects.

Screenshot_1

As a matter of fact, no. My Header is pretty simple. I created a dedicated Global Header template and have the following structure set up.

image

The logo is a placeholder image for now.




image

What’s really causing me to scratch my head is that in the Bricks Builder view for Desktop, Tablet, Mobile (landscape), Mobile (portrait) - the global nav bar resizes perfectly! But when opening up my website on the actual device, Mobile (landscape) specifically, the nav bar elements are not aligned properly.

Though, I am getting different results based on the circumstances.

Running the inspector tool in the browser, shows that the nav bar elements are aligned some of the time. Loading my website into the URL provided in the forum post you provided here (http://iloveadaptive.com/), shows me a different story. It shows that the nav bar elements are not aligned at all, no matter the device. However, running the website on my own personal devices shows everything is aligned perfectly except in a few views. It is not consistent. There is no true source for what the actual view/visibility is.

ILoveAdaptive Images:

image

image