Site logo

Archived topic

Disable header/menu shadow on start page?

3 replies · Started by Rickard on August 26, 2020

Viewing posts 1–4 of 4

Hello!

I am using a header/menu shadow (with the code below), and I want it to be active on all pages except from the start page. Is that possible?

.main-navigation, .sticky-enabled .main-navigation.is_stuck {
-webkit-box-shadow: 0px 1px 5px 0px rgba(176,176,176,1);
-moz-box-shadow: 0px 1px 5px 0px rgba(176,176,176,1);
box-shadow: 0px 1px 5px 0px rgba(176,176,176,1);
}

.main-navigation ul ul {
-webkit-box-shadow: 0px 1px 5px 0px rgba(176,176,176,1);
-moz-box-shadow: 0px 1px 5px 0px rgba(176,176,176,1);
box-shadow: 0px 1px 5px 0px rgba(176,176,176,1);
}

Best regards,
Rickard

Hi there,

you can use WP body classes and exclude the home page like so:
So your CSS would be this:

body:not(.home) .main-navigation,
body:not(.home).sticky-enabled .main-navigation.is_stuck {
    -webkit-box-shadow: 0px 1px 5px 0px rgba(176, 176, 176, 1);
    -moz-box-shadow: 0px 1px 5px 0px rgba(176, 176, 176, 1);
    box-shadow: 0px 1px 5px 0px rgba(176, 176, 176, 1);
}

body:not(.home) .main-navigation ul ul {
    -webkit-box-shadow: 0px 1px 5px 0px rgba(176, 176, 176, 1);
    -moz-box-shadow: 0px 1px 5px 0px rgba(176, 176, 176, 1);
    box-shadow: 0px 1px 5px 0px rgba(176, 176, 176, 1);
}

Thanks David!

I got it to work, eventually.

It turned out that I had some other lines of code which also affected the header in some ways (which was causing the shadow I wanted to get rid off) - but I added "body:not(.home)" at the start of that code and then it turned out just the way I wanted.

Glad to hear that

This archived topic is closed to new replies.