I have a sticky nav that was working just an hour ago. It appears upon scroll below the hero image when it’s working properly and stays fixed at the top of the viewport. I started to edit the sticky nav bar to make it expand to our brand grid of 1366px wide, and that must have been when I broke it.
The thing is, now that I really think about it I don’t even remember what causes it to appear after scrolling past the hero section. I think if I knew this, I’d be able to figure this out on my own.
I’m working in page Area Guide Template Copy. And there I have a fixed global nav and a sticky in-page nav.
Any help pointing me in the right direction is greatly appreciated!!
I realized that I had lost the Display Nav interaction on the the hero section. I reset that.
Now, the sticky nav is primarily working as intended, but two new style issues have come up. The links of the sticky nav are not performing the style that I’ve set in their current states. Basically I want the link text to turn our brand blue on hover (which it is currently doing), and go to 50% of that blue in pressed and focus states (which it is not currently doing). Also I want the background of the sticky nav to extend to cover 100% of the viewport width.
I’ve set the current states for each nav link, but something else seems to be overriding it.
I’ve set the navbar, (which needs to be 1366px) inside another div with a viewport width of 100% and given that a white background. That doesn’t seem to solve my need to have the white background of the sticky fill the width of the viewport.
Below is a screen shot of the sticky nav. I’m sure these must be two simple things I’m missing.
Would greatly appreciate any help on these two items!
