Re: header issues

How can I improve the look of my sticky header code?

DandSmart
Tourist
14 0 3

i use this code to make header sticky but it looks so bad

88888888888888888888888888888888888888888888888

<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>

88888888888888888888888888888888888888888888888888
WhatsApp Image 2023-11-30 at 13.49.57_c1be79d8.jpg

 

originally it look like this but its not sticky

 

WhatsApp Image 2023-11-29 at 01.00.10_1088ed27.jpg

Replies 4 (4)

Made4uo-Ribe
Shopify Partner
8819 2109 2587

Hi @DandSmart 

Oh, i thought this problem already solve. Check this one. 

 

@media only screen and (max-width: 749px) {
.mobile-header-area.d-xl-none {
position: fixed !important;
z-index: 2 !important;
width: 100% !important;
}
.col-12 {
margin-top: 83px !important;
}
}

 

And Save. 

 

 

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

 

 

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.
Need THEME UPDATES but has custom codes? No worries, contact us for affordable price.
DandSmart
Tourist
14 0 3

it worked but other issue occured 
orignal is ThisWhatsApp Image 2023-11-30 at 22.01.22_335e323a.jpgWhatsApp Image 2023-11-30 at 22.01.23_171f3b54.jpg

Made4uo-Ribe
Shopify Partner
8819 2109 2587

Add this code. 

 

 @media only screen and (max-width: 749px) {   
.ltn__breadcrumb-area.ltn__breadcrumb-area-2.ltn__breadcrumb-color-white.plr--9.breadcrumbs.overlay-bg {
    padding-top: 83px !important; 
}
 }

 

And Save.

Result:

Made4uoRibe_1-1701365000331.png

 

 

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.
Need THEME UPDATES but has custom codes? No worries, contact us for affordable price.
DandSmart
Tourist
14 0 3

when i scrawl theses word also scrawl and shows on header check it out 
reeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee.jpg