Sticky/Fixed Header + Navigation with a twist for Brooklyn theme

Highlighted
New Member
2 0 0

Hey folks,

 

I'm working on my header/navigation bar of my brooklyn theme. I wanted them fixed while scrolling and used pretty much all of this:

https://community.shopify.com/c/Shopify-Design/Sticky-Fixed-Header-and-Navigation-for-Debut-Theme/td...

 

I made some minor adjustments, which aren't of interest in the following subject.

What I'm trying to do now, is that (actually only matters for the homepage) after beginning to scroll down the homepage, that a black background (doesnt necessarily needs to be completely black, can be a somewhat transparent black) surfaces beneath the navigation icons. The icons are "loose" on the homepage or have no background color rather. The icons are white on the homepage (icons of sidemenu nav, shopping cart and logo etc), which are also visible on top of the background picture/slideshow. But when scrolling down below the slideshow section, the background is white, and since is there no background color behind the navigation bar, the nav bar icons and logo aren't really visible since they're white too.

 

The other pages have a fixed white bar and black icons, so that is fine. Just the homepage is bugging me.

 

In other words it should be a somewhat dynamic navigation bar.

(I tried to somehow implement this with some adjustments, but couldn't figure it out:

https://codepen.io/sebastianbaumann/pen/ogGdxX )

 

Appreciate any help. Thanks in advance!

 

Best,

CWalker

 

 

See the pictures below for a better visualization.

nav bar example-actual state 1.pngnav bar example-target state 1.png

0 Likes

Hello ,

Please give me site url so that I will help you

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
12 0 3

Hi,

 

I added a fixed header to my Brooklyn theme a while ago, however, just recently i have noticed that it does not stay fixed and flashes away for a second when loading a new page, then reappears, this isn't normally how it was working...

Has anyone had this before, or know if there is a relatively easy fix?

 

Thanks in advance

Luccardo.com

0 Likes

Hello ,

What is your exact issue...I am unable to see any issue on your sticky header while scrolling...

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
12 0 3

Hi,

Thanks for your reply.

 

The problem isn't while scrolling, but when you go from one page to another the header disappears for a second as it loads the page, then comes back all in a split second. The header should stay stuck while the page loads, and not flash away.

 

Thanks

0 Likes