Sticky header Craft Theme / Transparent header

Store Design
1

Hello Community :slightly_smiling_face:

I recently started to redesign our website in the new craft theme. I really wanna have our menu to stick even though you scroll down on the site. I been looking everywhere on google/youtube etc but cant find any solutions even with coding. I also really want it transparent when its sticky. Please help if you have a solution !

2

To make the header sticky even though you scroll down:

  1. Go to admin panel > Online Store > Themes > click Actions dropdown > click Edit Code
  2. In the code editor go to Sections directory and open header.liquid file
  3. Find onScroll() function (it should be in lines 564-589)
  4. This function is responsible to show and hide sticky header during scrolling. Change the code of this function to below code and click Save
onScroll() {
 requestAnimationFrame(this.reveal.bind(this));
}

To make the header transparent:

  1. In the code editor go to Assets directory and open base.css file
  2. At the bottom of the file add CSS rule like this:
.shopify-section-header-sticky .header-wrapper { 
  background-color: rgba(239, 236, 236, 0.6);
}

Note that you have to use RGBA color with opacity value. This above color is an example, you have to change it to your own color.

3

Cant get the sticky header to work :disappointed_face: I dont know if i do anything wrong maybe… Do i need to use both codes for it to stick? Like the one you sent and the one which is there now?

But thanks a lot for the transparent header that work great! ! TYSM

4

Thanks so much, your solution works for me exactly how you described.