Nav bar menu item colour based on background image

When using the Hero block, is it possible to change the nav bar menu item colour based on whether the background image is dark or light. So for dark backgrounds the nav bar items could be white or a light grey.

Well with no details about your structure…

One method for creating variations on a Hero, or any element for that matter is just target by class.

So your normal nav uses the class and tags .navbar-nav li a

You can create another one called .dark .navbar-nav li a

Now when ever you add .dark to the hero bloc, what ever styles you have in .dark .navbar-nav li a will apply to your navigation.

This way you can restyle everything applying one class to an element.

eg.

.dark h1, .dark p

2 Likes

It’s the standard structure provided by the Hero bloc that has the logo and company name fields on the left and the nav bar items on the right.

Thank you very much indeed for that solution, I will certainly give it a go.