[Resolved] How do I add drop shadow under my header?

[Andy]

Hi there,

I’ve tried many of the codes offered in past topics. Unfortunately, I always run into 2 problems:

– It adds a drop shadow on the left side of my page. I’m assuming because I’m using an off-canvas menu?
– It doesn’t add a wide enough drop shadow under my header.

Overall, how do I add drop shadow under my header only (full-width)? Something similar to looper.com

Thank you!

[David]

Hi there,

try this CSS:

.main-navigation:not(.slideout-navigation),
.sticky-enabled .main-navigation.is_stuck {
    box-shadow: 0 5px 15px 5px rgba(0,0,0,0.25) !important;
}

[Andy]

Perfect thank you David, one final question:

I also have this code applied:

@media (max-width: 768px) {
    .single-post .site-main {
        margin-top: 0;
    }
}

Basically, in mobile view, single blog posts, I’ve eliminated the top margin altogether.

As of right now, your code works perfectly everywhere except my single blog posts in mobile view.

I’m assuming, your drop shadow code is behind this area? Is there a way to bring it forward so it’s not hidden by margin-top: 0? Hope this makes sense.

[Leo]

Try this instead:

.main-navigation:not(.slideout-navigation),
.sticky-enabled .main-navigation.is_stuck {
    box-shadow: 0 5px 15px 5px rgba(0,0,0,0.25) !important;
    position: relative;
}

[Andy]

Thanks to both of you! Enjoy your Sunday.

[Leo]

No problem 🙂

[Author]

Posts