Transparent Menu Over Hero Image Header
That transitions to solid background on scroll.
sdlawrence.com
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:

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