Transparent Menu Over Hero Image Header

That transitions to solid background on scroll.

This is for the Themeco Pro theme using the Header Builder with CSS and adapted from a similar thread on the Themeco support forum.

Header Settings

1. Set the BAR that contains the menu to 'ABSOLUTE':


2. Assign a class to the BAR:



3. Apply CSS to fixed bar. Note transition is used to smooth transition from transparent to solid color:

.sticky-color {
  transition: background-color .5s;
.sticky-color.x-bar-fixed {
  background-color: #292929;
  transition: background-color 1s;
Example usage: Demo

Share this Post