Header responsive settings

Desktop and mobile layouts

Our header builder has two different areas to add your elements for desktop and mobile devices. The area for large devices is applied for devices resolutions starting from 1025 pixels in width. Used for laptops, desktops, and other larger screens. And another one is for 1024 pixels and smaller. It is for tablets in vertical and horizontal mode and for smartphones. You can switch between these two areas using the “Desktop layout” and “Mobile layout” buttons in the header toolbar.

Mobile settings

So to configure your header responsive layout, you just need to switch to the area of the mobile device and add elements you want to see on a smaller screen in the same way you do this for desktop devices. In general, we suggest you keep your mobile layout as simple as possible. Use only very basic elements there like the logo, mobile menu, cart widget. You can add some extra information in the top bar column as well if necessary.

You also have the ability to set different row heights or hide some specific parts on desktop or mobile devices. For example, you have a top bar with some secondary navigation and don’t need to show it on mobile devices. Then you just need to edit your top bar row and enable the “Hide on mobile” option as shown in the screenshot