AppStrap.

Primary Translucent Header

To make the header semi-transparent (translucent) primary colour by default turning to the full primary colour 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-dark , .bg-primary .bg-op-2 .sticky-bg-primary 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!

See demos of other colours here: header translucent white and header translucent dark.