How do I add a line under the header Mobile View - Publisher Theme

[randytheasian]

URL: https://jsdqft-gs.myshopify.com/

I'm currently using this code for the desktop: 
@media screen and (min-width: 990px) {
.header:not(.drawer-menu).page-width {
border-bottom: 1px solid;
max-width: 100% !important;
}
.scrolled-past-header .header:not(.drawer-menu).page-width { border-bottom: 1px solid #FFF; }
}

I want it on Mobile: 

 

[Rahul_dhiman]

Hello @randytheasian 
Go to online store ----> themes ----> actions ----> edit code ---->base.css
add this code at the end of the file and save.

@media screen and (max-width: 768px) {
.header-wrapper {
    border-bottom: 1px solid black !important;
}
}

result

If this was helpful, hit the like button and accept the solution.
Thanks

[randytheasian]

Why it doesn't show up on my mobile view?

[websensepro]

Hi @randytheasian 

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.css / based.css file and paste the code in the bottom of the file.

@media(max-width:767px){
.header-wrapper {
    border-bottom: 1px solid black !important;
}
}

Result:

If my reply is helpful, kindly click like and mark it as an accepted solution.

If you are happy with my help, you can help me buy a COFFEE

Thanks!

[randytheasian]

It's not showing up

[websensepro]

Do you need this line where the red line is?

[randytheasian]

No, the code you provided works on yours eventually but it's not working on mine. The line is not showing under header on my mobile 

[websensepro]

 @randytheasian Try this code

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.css / based.css file and paste the code in the bottom of the file.

@media(max-width:989px){
sticky-header.header-wrapper.color-scheme-1.gradient {
    border-bottom: 1px solid black !important;
}
}

 If my reply is helpful, kindly click like and mark it as an accepted solution.
If you are happy with my help, you can help me buy a COFFEE
Thanks!