Sticky Header on Mobile - Impulse Theme

Solved

Sticky Header on Mobile - Impulse Theme

TBS2023
Shopify Partner
107 1 7

Hello

Please advsie how to make my header sticky on Mobile

www.thebodyshop.com.lb

dosawr

 

Regards

Accepted Solution (1)

Anshul_arora
Navigator
450 128 93

This is an accepted solution.

Hello @TBS2023 ,


I understand you are looking to make your Header section sticky on the mobile version.


Kindly add the below code at the bottom of the theme.liquid file before </body> tag and save for the desired output.

<style>
@media only screen and (max-width: 769px)
{
.site-header--opening .header-layout.header-layout--center {
display: flex !important;
}
.header-layout.header-layout--center {
position: sticky !important;
}
}
</style>


Output -:

Anshul_arora_0-1718877881428.png


I hope the code helps you.

Please share if you have any queries.

Thank you.

Please remember to like and accept the solution to help other store owners.

For Shopify Design & Development | Custom Coding -Visit Here

View solution in original post

Replies 6 (6)

BrainStation23
Shopify Partner
379 57 55

Hi @TBS2023. In impluse theme you will find the settings to make your header sticky. You can see the below image:

BrainStation23_0-1718861909584.png


Let us know if you need any help. Have a great day.

 

Brain Station 23 PLC (Mail: js.team@brainstation-23.com)
- Was your question answered? Mark it as an Accepted Solution
- Did the solution not address your concern? We kindly request that share or mail your store URL with us this will enable us to collaborate more closely.
- Explore our Shopify public apps

Rahul_dhiman
Shopify Partner
231 43 43

Hello @TBS2023 
Go to online store ---------> themes --------------> actions ------> customization.
zx.png

let me now if this was helpful.
Thanks

Was I helpful?

Buy me a coffee



Want to modify or custom changes or bug fix on store . Or Need help with your store? Or -Want Complete Storefront
Email me -rahul@prowebcoder.com - Skype: live:dhiman.639
Checkout Some Free Sections Here
TBS2023
Shopify Partner
107 1 7

I already have this clicked- but it doesnt work on Mobile

Rahul_dhiman
Shopify Partner
231 43 43

Please share your website URL.

Was I helpful?

Buy me a coffee



Want to modify or custom changes or bug fix on store . Or Need help with your store? Or -Want Complete Storefront
Email me -rahul@prowebcoder.com - Skype: live:dhiman.639
Checkout Some Free Sections Here
TBS2023
Shopify Partner
107 1 7

Anshul_arora
Navigator
450 128 93

This is an accepted solution.

Hello @TBS2023 ,


I understand you are looking to make your Header section sticky on the mobile version.


Kindly add the below code at the bottom of the theme.liquid file before </body> tag and save for the desired output.

<style>
@media only screen and (max-width: 769px)
{
.site-header--opening .header-layout.header-layout--center {
display: flex !important;
}
.header-layout.header-layout--center {
position: sticky !important;
}
}
</style>


Output -:

Anshul_arora_0-1718877881428.png


I hope the code helps you.

Please share if you have any queries.

Thank you.

Please remember to like and accept the solution to help other store owners.

For Shopify Design & Development | Custom Coding -Visit Here