Get meza theme
///Responsive header

Responsive header

Create fully custom responsive header.

In this article we will make our First header responsive. We can do this with various methods we can hide and show elements or build fully custom header for each device.

Tablet header

In tablets, we have some space so we just hide the top bar and make the header a little bit shorter.

Fully custom tablet/Mobile header

In the previous example, we customize the desktop header to make it works in tablets. Now we will build a fully custom tablet header. Let’s get started.

create new header for tablet & mobile

Create off-canvas menu

Create off-canvas cart

Final result

I just increase the width of “side-cart” off-canvas to 320px.

Was this article useful?



Last update on: January 16, 2021


Related Articles

Import header

Learn How to import header from library.

Sticky header


Where exactly the template will be displayed.

Create your first header

Getting started with headers, build a simple header.