Skip to content

We're game if you are!

Get in touch to find out more.

Get AppStrap!
Header Options Header Bottom Header Collapse Menu Header Responsive Collapse Menu Header Compact Header Dark Header Elements Header Full Width Header Nav Full Height Header Nav Left Header Navbar Below Header Off Canvas Header Overlay Menu Header Responsive Overlay Menu Header Primary Header Translucent Header Translucent Dark Header Translucent Primary Header Transparent Header Transparent Dark Header Transparent Primary

Dark Translucent Header

To make the header semi-transparent (translucent) dark 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-dark , .bg-dark .bg-op-2 .sticky-bg-dark 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 primary.

Awesome Features

99.9% Uptime Free Upgrades Fully Responsive Bug Free

Get AppStrap
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