Booster Theme , Fix header in website?

Solved
Highlighted
Tourist
17 0 2

Hi all!

I´m trying to find a way to fix the position of my website header  in booster theme but i don´t find any way to do this, i´m newbie in code so is really difficult for me find a solution, if someone could help me i would be grateful, thanks!

0 Likes
Highlighted

This is an accepted solution.

most likely it's about CSS you may send me a msg and I'll do my best =] 

Chen Zissu
Expert Profile: https://experts.shopify.com/no-name4
Email: chen@zissultd.com
Skype: @zissuc
Facebook: http://bit.ly/2GmRHta
0 Likes
Highlighted
Shopify Partner
482 86 134

It is third part theme ? Have you tried to contact their developers ?

Also please share live site url, so we can understand the issue.

Author: Hovhannes Sargsyan (aka sarhov).
An individual web developer focused on Shopify development.
Need more help? Feel free to send me a direct message or drop an email shopify@sarhov.com

Website: https://sarhov.com  
Email: shopify@sarhov.com
Skype: @sarhov
Telegram: @sarhov
Try Shopify free for 14 days,
0 Likes
Highlighted
Tourist
17 0 2
Hi my website is markusdayan.com i´m looking for the header stay fixed
with the header strip too when you navigate, could you help me with this?
thanks
0 Likes
Highlighted
Shopify Partner
482 86 134

I have looked at your site, the best I can do is provide this code, it should work.

Go into Edit Code > theme.liquid

Scroll at the very bottom and past the following code there.

Make sure you are putting in correctly without instering it into another script.

Put it right before closing </body> tag

<script>
  
  window.onscroll = function() {myFunction()};

  // Get the header
  var h = document.getElementsByClassName("link_list_bottom");
  var header = h[0]

  // Get the offset position of the navbar
  var sticky = header.offsetTop;

  // Add the sticky class to the header when you reach its scroll position. Remove "sticky" when you leave the scroll position
  function myFunction() {
    if (window.pageYOffset > sticky) {
      header.classList.add("sticky");
    } else {
      header.classList.remove("sticky");
    }
  }

</script>

<style>
  /* The sticky class is added to the header with JS when it reaches its scroll position */
  .sticky {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 999;
  }
</style>

 

 


as you can see in the following gif screenshot, it works at my end.6FRIsoH


Author: Hovhannes Sargsyan (aka sarhov).
An individual web developer focused on Shopify development.
Need more help? Feel free to send me a direct message or drop an email shopify@sarhov.com

Website: https://sarhov.com  
Email: shopify@sarhov.com
Skype: @sarhov
Telegram: @sarhov
Try Shopify free for 14 days,
0 Likes
Highlighted
Tourist
17 0 2
Hi sir, thanks for your answer!, i did like you said but doesn´t work :-(
0 Likes
Highlighted
Shopify Partner
482 86 134

it means something is preventing it to run, because when I put the same code via console it works, maybe you can send theme.liquid file.

Just don't past its content, it will be too long, but upload it somewhere and past url to that file, you can use gist.github.com

Author: Hovhannes Sargsyan (aka sarhov).
An individual web developer focused on Shopify development.
Need more help? Feel free to send me a direct message or drop an email shopify@sarhov.com

Website: https://sarhov.com  
Email: shopify@sarhov.com
Skype: @sarhov
Telegram: @sarhov
Try Shopify free for 14 days,
0 Likes
Highlighted
Tourist
17 0 2

Hi, finally works like in your gif, thanks!! but i wanted ask you if is possible fix also the part with the logo... it would be perfect thank you!

0 Likes
Highlighted
Shopify Partner
482 86 134

what problem with logo ?

by the way if the previous answer solved, please answer it as solution, thank you))

Author: Hovhannes Sargsyan (aka sarhov).
An individual web developer focused on Shopify development.
Need more help? Feel free to send me a direct message or drop an email shopify@sarhov.com

Website: https://sarhov.com  
Email: shopify@sarhov.com
Skype: @sarhov
Telegram: @sarhov
Try Shopify free for 14 days,
0 Likes
Highlighted
Tourist
17 0 2

in mobile version doesn´t fix like the header, is there any way to get this in mobile version too, thankss

0 Likes