Transparent Menu Over Hero Image Header

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

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