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

Home Forums Support How do I add drop shadow under my header?

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #1493846
    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!

    #1493927
    David
    Staff
    Customer Support

    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;
    }
    #1494585
    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.

    #1494611
    Leo
    Staff
    Customer Support

    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;
    }
    #1494732
    Andy

    Thanks to both of you! Enjoy your Sunday.

    #1494856
    Leo
    Staff
    Customer Support
Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.