Fixed Header Booster Theme

Highlighted
Excursionist
54 0 1

Hey guys,

I know this is a pretty common topic but I could not find the right solution in the forum.
I am trying to get a fixed header.

Can someone help me with it?

Theme: Booster 2.2.1
URL: www.beerstock.de

Thanks!

0 Likes
Shopify Partner
100 19 18

Hi @qcombo 

 

what is the issue in the header?

Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: codecorneres@gmail.com
Skype: code.corners
0 Likes
Excursionist
54 0 1

there is no real issue, I just wanted to try how it would look like if the header would be fixed.
People always saying that this would be a conversion improving factor. 

0 Likes

Hello qcombo,

You want sticky header??

1. Go to Online Store->Theme->Edit code
2. Search theme.js >>paste bellow code in bottom of file

 var header= document.getElementsByTagName("header")[0];
    var sticky_class = header.offsetTop;
    $(window).scroll(function(){
      if ($(window).scrollTop() >= sticky_class ) {
        $('.site-header').addClass('sticky-header');
      }else {
        $('.site-header').removeClass('sticky-header');
      }
    });

3. Add this css to theme.scss file at bottom

.sticky-header {
	position: fixed;
	top: 0;
	width: 100%;
	z-index: 999;
}
Want to modify or incorporate custom changes on store, Hire us.
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Custom Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Digital Marketing | Site Speed Optimization | Web Development
0 Likes
Shopify Partner
100 19 18

Hello @qcombo 

 

Follow this tutorial this will help you:

 

https://community.shopify.com/c/Shopify-Design/Fix-Position-of-Header-Booster-theme/td-p/505939

 

Thanks

Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: codecorneres@gmail.com
Skype: code.corners
0 Likes
Excursionist
54 0 1

this sadly did not work for me.

Do you mean theme.scss.liquid and theme.js.liquid ?

0 Likes

@qcombo,

yes..

where did you put the code

Want to modify or incorporate custom changes on store, Hire us.
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Custom Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Digital Marketing | Site Speed Optimization | Web Development
0 Likes
Excursionist
54 0 1

at the end of theme.scss.liquid and theme.js.liquid

0 Likes