How to enable sticky header, only for mobile in Dawn theme?

Store Design
, ,
1

Hello,

I am using the Dawn theme (10.0.0) and I only want to make sticky headers on mobile. When I activate it in Shopify, it is active on both desktop and mobile, can you help guys ?

Thank you.

2

@slymn00

Please share your store URL and off the setting sticky header.

Thanks!

3

@dmwwebartisan this is website URL https://juweliermarkt24.ch/ no password now.

Ty.

1 Like
4

@slymn00

Please add the following CSS code to your assets/base.css bottom of the file.

@media screen and (max-width: 749px) {
.utility-bar {height: auto !important; position: fixed !important;}
.header-wrapper {position: fixed !important; width: 100% !important;margin-top: 5rem !important;}
#MainContent{margin-top: 7em !important;}
}

Thanks!

1 Like
5

@dmwwebartisan thanks a lot bro !

6

@slymn00

Thanks! Welcome again, bro!

7

@slymn00

Solution for My login button, the social media icon is gone on this page.

Please add the following CSS code to your assets/base.css bottom of the file.

@media screen and (max-width: 749px) {
.menu-drawer__navigation-container {height: auto !important;}
.menu-drawer__navigation {padding: 1.6rem 0 !important;}
.menu-drawer__menu-item {padding: 0.5rem 3.2rem !important; font-size: 1.2rem !important;}
}