Hero Sticky Nav Styling

I Need Help
1

HI There,

I have a hero set as the main content area with global header disabled. The hero nav is set to sticky.

The text colour for the nav is set to white ( background of hero is dark ).

OK so far. The hero activates on scroll but the background is white - so the text is invisible ( white on white ).

Q1 - How can I set an alternative menu colour for the nav links.

My logo is also white ( again background of hero is dark ). When the hero activates the logo is again white on a white bg - so invisible.

Q2 - How can I set an alternative logo file for the hero?

I think I’ve looked everywhere.

1 Like
2

Hey,

Not sure about the second question, so I will have come back to you later, but for the first question, that’s strange. Are you sure you set the background color to dark? I just tried to do that, and it worked fine with me. Try to recreate the hero bloc and set the color to a new dark color in color swatch manager, it should be fine.

3

Well now I just feel stupid. It’s all working fine now after going through it in a logical order.

I’d love to know how to do the alternate image for the sticky nav logo but thats really just for bonus points.

Thanks - I’ll be signing up for the advanced video.

1 Like
4

I can set the color of the sticky nav with the background swatches - but I can’t find a way to set the opacity. When the color swatches are used, there is no opacity setting. This can be achieved in the global area with classes, but then the nav bar doesn’t first appear superimposed on the hero image and the visual effect isn’t the same. In Eldar’s themes, he uses solid colors for the sticky nav bars. Is it possible to make the nav bar translucent?

5

Try making a color swatch and setting the opacity to what you want when creating the swatch.

6

If the logo is a png or svg on a transparent background, and you’ve set a dark background to the hero bloc, there should be no white background to the logo.