Remove transparent header on pages, keep on homepage

BB Theme
1

Hello,

I am using this in my css:

@media (min-width: 768px) { .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: -120px; /*Adjust depending on the height of the header for large devices*/ } }

.fl-page-header-container {
padding-bottom: 0;
padding-top: 0;
}

This removes the header and makes it transparent. However for other pages the header is removed and transparent as well. How do I make this code for homepage only?

2

Hey Dan,

You can add .home before every selector like so… .home .fl-page-content {, .home .fl-page-header-primary {, and so on. :slight_smile:

Ben

3

Thanks

4

Glad I could help! Enjoy! :slight_smile:

Ben

5

Hi I am new. I pasted this code and did a preview, it was above the header menu. Which parts do I use?

6

Hey St. Clair,

Do you mind sharing the URL of the site you’re working on so we can check?

Ben

7

Hi Ben,

I’ve also used this code snippet on a client site. It has worked fine. :slight_smile:

I managed to alter the css for the nav menu so that the text is white which works fine. However now, I need to swap homepage header logo so that it is reversed/white over the homepage image.

For the rest of the site, it should be as default. I just need this treatment for the homepage.

Could you please suggest how I may achieve this?

Thanks

Richard

8

Hey Richard,

That’s going to be quite tricky. Do you mind sharing the URL of the page in question so we can check? Perhaps a link to the new logo to be used as well?

Ben

9

[Content Hidden]

10

Hi Richard,

You could try using CSS filters and invert the logo image. Give it shot with this CSS:

.home .fl-logo-img {
  -webkit-filter: brightness(0) invert(1);
     -moz-filter: brightness(0) invert(1);
       -o-filter: brightness(0) invert(1);
      -ms-filter: brightness(0) invert(1);
          filter: brightness(0) invert(1);
}

Thanks,
Danny