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.
