Menu custom CSS for all page except main page

Hello guys,

I would like to add this custom CSS code fo all pages EXCEPT the main one.

.site-header.float-header {
  background-color: #fff;
  box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
}

Do you have an idea ? Thank you a lot :slight_smile: Seb

Hello there,

You can use body:not(.home) selector to exclude the home page.

    body:not(.home) .site-header.float-header {
      background-color: #fff;
      box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
    }

Regards,
Kharis

Very good it works a lot :slight_smile: Thank you

And if i want to bring the same modification but only on mobile and only on the main page ?

Seb :slight_smile:

To target CSS code on specific screen size, you can use media query. For example:

    @media only screen and (max-width: 767px) {

      body.home .site-header.float-header {
        background-color: #fff;
        box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
      }
      
    }

Regards,
Kharis