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: May 24, 2020


Related Articles


Where exactly the template will be displayed.

Sticky header

Create your first header

Getting started with headers, build a simple header.

Import header

Learn How to import header from library.