Skip to content

We're game if you are!

Get in touch to find out more.

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.

Awesome Features

99.9% Uptime Free Upgrades Fully Responsive Bug Free

Theme Colours

Green Red Blue Purple Pink Orange Lime Blue-dark Red-dark Brown Cyan-dark Yellow Slate Olive Teal Green-bright

Cookies are NOT enabled so colour selection is not persistent.

Back to main homepage

Back to intro page