Transparent Header

BB Theme
1

I used the code from KB and everything works as expected. I did want the transparent header though only on the home page. I added the .home .fl-page-content { to the css and it did make just the homepage header transparent. My problem is that for the other pages the header background is now white and it is supposed to be black. I have black selected in the customizer and if I completely remove the CSS the header is Black. Below is the complete code that I used

@media (min-width: 768px) {
.home .fl-page-content {
margin-top: -151px; /Adjust depending on the height of the header for medium devices/
}
.fl-page-header-primary {
position: relative;
z-index: 3;
background: none;
}
.fl-page .fl-page-header-primary .fl-page-header-wrap {
border-bottom: none;
}
.fl-page-header-primary .fl-page-nav-wrap {
background: none;
border-top: none;
border-bottom: none;
}
}
@media (min-width: 992px) {
.fl-page-content {
margin-top: -110px; /Adjust depending on the height of the header for large devices/
}
}

Thank You
Rick

2

Hi Rick,

Hoe you’re having a great day!

Would it be possible for you to provide a link to the site in question, please. So we can take a closer look at the CSS.

All the best,
Danny

3

[Content Hidden]

4

Hey Rick,

I’d just like to chime in here. You need to add the .home CSS selector to each of the styles, e.g., .fl-page-header-primary becomes .home .fl-page-header-primary, .fl-page .fl-page-header-primary .fl-page-header-wrap becomes .home .fl-page .fl-page-header-primary .fl-page-header-wrap. That way, all the styling gets applied only to the home page. :slight_smile:

Ben

5

Thank You Ben!

Rick

6

No worries! Enjoy! :slight_smile:

Ben