Dark Transparent Header
To make the header transparent by default turning to dark on sticky simply set/remove the following classes on the following elements:
-
1
body: add the class.header-ontop. -
2
.header: add the classes.header-transparent,.header-darkand.sticky-header-dark. -
3 You may need to add a top margin to the elements in the
#highlightedregion so they don't show under the header. - 4 Also ensure the background image underneath is dark colour so the navbar links can be seen, use the overlay utilities to help here.
- 5 That's it!
See demos of other colours here: header transparent white and header transparent primary.