How can I display different headers on PC and mobile?

Store Design
1

Hi,

link: https://custom-theme-development-1.myshopify.com/

password : demo

How to show this pc header ( photo 1 ) in tablet

I want to add this code to the header (min-width: 768px)

Custom-Theme-Development-1.png
Custom-Theme-Development-1.png1440×789 37 KB

current header

I want this header (below photo) only shown in mobile (max-width:767px)

Custom-Theme-Development-2.png
Custom-Theme-Development-2.png604×732 35.6 KB

2

Hi!

There are already two parameters set in your theme-styles-responsive.css, edit these:

@media (min-width: 1200px)
.home-slideshow .not_img {
    height: 720px;
    line-height: 720px;
}

@media (max-width: 1199px)
.home-slideshow .not_img {
    height: 30vh;
    line-height: 30vh;
}
3

What do i need to do?

I’m confused…

4

Edit the max-width values to the 2 you previously mentioned and that will set it to be mobile or tablet/desktop views