Solved

i want to make my mobile view header skicky

DandSmart
Tourist
14 0 3

i want to make my mobile view header skicky on my desktop view it header is sticky but not not on mobile view
this my store link
https://dandsmart.myshopify.com/
WhatsApp Image 2023-11-29 at 01.00.10_0a67cdb8.jpgWhatsApp Image 2023-11-29 at 01.00.10_1088ed27.jpg

Accepted Solution (1)

websensepro
Shopify Partner
873 117 126

This is an accepted solution.

hy, @DandSmart 

Go to Online Store
2) Edit Code
3) Find theme.liquid file

4) Add the following code in the bottom of the file above </body> tag.

<style>
@media only screen and (max-width: 600px) {


.mobile-header-area.d-xl-none {
    position: fixed  !important;
    z-index: 2  !important;
}

.col-12 {
   margin-top: 83px !important;
}
}
</style>
Need a Shopify developer?
Hire us at WebSensePro
For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
Subscribe to our youtube channel or buy us a Cofee here

View solution in original post

Replies 3 (3)

websensepro
Shopify Partner
873 117 126

This is an accepted solution.

hy, @DandSmart 

Go to Online Store
2) Edit Code
3) Find theme.liquid file

4) Add the following code in the bottom of the file above </body> tag.

<style>
@media only screen and (max-width: 600px) {


.mobile-header-area.d-xl-none {
    position: fixed  !important;
    z-index: 2  !important;
}

.col-12 {
   margin-top: 83px !important;
}
}
</style>
Need a Shopify developer?
Hire us at WebSensePro
For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
Subscribe to our youtube channel or buy us a Cofee here
DandSmart
Tourist
14 0 3

it worked but the header looks bad.WhatsApp Image 2023-11-30 at 13.49.57_c1be79d8.jpg

MathieuKessler
Tourist
3 0 0
You can try with :

{

position: sticky;

top: 0;

z-index: 1;

margin-block-end10px;

}
Capture.JPG