Translucent Header
To make the header semi-transparent (translucent) simply set/remove the following classes on the following elements:
-
1
body
: add the class.header-ontop
. -
2
.header
: add the classes.header-translucent
,.bg-white
.bg-op-2
.sticky-bg-white
and.sticky-bg-op-8
. -
3 You may need to add a top margin to the elements in the
#highlighted
region 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!
The default is to go to a white background when the header is sticky but you can combine
.header-translucent
and
.header-ontop
with the
.header-dark
and
.header-primary
classes too.
See the demos here: header translucent dark and header translucent primary.