How to make nav bar stay on screen while scrolling?

Highlighted
New Member
1 0 0

After making the suggested modifications, my navigation bar also slides behind all other content as others have mentioned.

Does anyone know of a solution to this?

Thank you in advance!!!

0 Likes
Highlighted
New Member
2 0 1

Hi Bill,

 

I've used the code, but it doesn't seem to be staying fixed! It is changing colour though...

 

Can you help?

 

0 Likes
Highlighted
New Member
2 0 1

Hey everyone, 

To get your header to be in front of your images, you have to change the z-index. 

.header-wrapper {
  position: fixed;
  background-color: rgba(255, 255, 255, 0.7);
  padding-bottom: 12px;
  width: 100%;
  z-index: 1;
}

Highlighted
Tourist
45 0 2

Does anyone know how to make the background color appear only on scroll? Looks like the answer is here (http://stackoverflow.com/questions/28266651/change-header-background-colour-when-page-scrolls), but I'm having trouble implementing into the shopify brooklyn theme. Here is my website, publicrecapparel.com (I haven't pushed the fixed header out yet because I want the header bar to change color on scroll).

Any pointers would be greatly appreciated. Thank you!

 

0 Likes
Highlighted
Shopify Expert
498 9 96

Hi Zach. Could you post a link to a theme preview so we can see what code you've tried and figure out why it's not working?

0 Likes
Highlighted
Tourist
45 0 2

Hi Gina,

Thank so much for your message. I'm not sure I know how to do that. Can you let me know how to post a link to a theme I'm working on as a backup without publishing it as my live site? I'll share then.

Thanks!

Zach

0 Likes
Highlighted
Shopify Expert
498 9 96

Hi Zach. If you right click the Preview button on your development theme and then select 'Copy link location' from your context menu, you should get a link that looks like this: http://publicrecapparel.com/?preview_theme_id=12345678

0 Likes
Highlighted
Tourist
45 0 2

Perfect. Thanks so much. Does this work? You'll see I've got the header frozen here, but it doesn't change color on scroll. Any tips would be greatly appreciated.

http://public-rec-2.myshopify.com/?preview_theme_id=76165572

Thank you!

Zach

0 Likes
Highlighted
Shopify Expert
498 9 96

Yes, that worked. Where can I find your JS for the method described here: http://stackoverflow.com/questions/28266651/change-header-background-colour-when-page-scrolls which you referenced above?

0 Likes
Highlighted
Tourist
45 0 2

I didn't know where/how to add that! Can you give me some guidance there? I think that is what I'm missing. I tried to add it as an asset called header respond like this, but that can't be right. I'm pretty green with all of this.

Let me know if this screen shot works:

https://www.dropbox.com/s/rgdgplkd1ozpznp/Screenshot%202015-11-16%2017.59.55.png?dl=0

 

0 Likes