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':

Dashboard

2. Assign a class to the BAR:

Dashboard

CSS

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