Transparent Masthead homepage

Airi
#1

Hello,

How do I make the header background transparent on my homepage only. All the code I’ve found changes my whole site.

Thanks

#2

Hi,

Thank you for contacting us. I am happy to help with your queries.

You can add a .home class name at the beginning of your code to make it only be executed only on homepage.

For example, if the current code looks like this:

    .background-overlay {
      display: none;
    }

Replace it to

    .home .background-overlay {
      display: none;
    }

I hope this reply helps.

Regards,
Kharis
aThemes Support

#3

This hasn’t helped unfortunately, nothing changed.

I tried this code you sent before for another page. And it doesn’t work either, it only recolours if a hex code is applied.

    .page-id-4 #masthead {
       background-color: #none;
    }

I’m using header style Basic 2 - Outside Header and have set colours for both sticky and non-sticky views (black and white). This means, that I’m only able to do a colour overlay rather than remove the colour completely. Also, using the code you sent previously changed the header for both sticky and non-sticky views, and I only want to change the non-sticky colour.

Is this possible?

This is the link to my site for reference.

Thanks

#4

Hi,

Thank you for getting back.

Try this code:

    .home #masthead-sticky-wrapper:not(.is-sticky) #masthead {
      background-color: none;
    }

Regards,
Kharis
aThemes Support

#5

This solution hasn’t worked either unfortunately.

#6

Hi,

Thank you for getting back. Perhaps there is a line contains an error from the entire code of your additional CSS. If you couldn’t identify it, I’d recommend validating all of your code with this tool: https://jigsaw.w3.org/css-validator/#validate_by_input. And try fixing it when the CSS issue found. You can share it here in case you don’t know how to fix.

Regards,
Kharis
aThemes Support