[Resolved] Box shadows not showing correctly in the menu

Home Forums Support [Resolved] Box shadows not showing correctly in the menu

Home Forums Support Box shadows not showing correctly in the menu

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #1596885
    Baavo551

    Hello,
    I’m using this code to generate shadows

    .site-header, .container, .site-footer, .site-info {
    box-shadow: 0 10px 10px #555;
    }

    Found from this post https://generatepress.com/forums/topic/drop-shadow-around-site/

    Does anyone know how to get that bottom shadow away from the menu ?

    box shadows not correct in menu

    #1596923
    David
    Staff
    Customer Support

    Hi there,

    can you share a link to your site so i can see the current layout.

    #1597045
    Baavo551

    Sorry I didn’t explain lot from website, I thought it was pretty fresh.. But no it wasn’t it has elementor plugin which has high potential to break that menu shadow. Url for this site is http://www.senderwizz.com

    #1597584
    Elvin
    Staff
    Customer Support

    Hi,

    I’m not exactly sure I understand what you’re trying to achieve.

    Can you explain a bit more on “how to get that bottom shadow away from the menu ?”?

    Are you trying to add distance between the shadow and the header? If so, you’ll have to adjust the x and y offset of the box-shadow property.(currently set to 0px and 10px)

    Mockup images or reference site of what you want it to look like will help a lot in giving us an idea.

    Let us know.

    #1597874
    Baavo551

    Hello,
    Please see the image how I would like it to appear

    this is how it should look

    #1597908
    Elvin
    Staff
    Customer Support

    Try adding this PHP snippet:

    add_action('generate_before_header', function(){ 
    	echo '<div class="body-inner grid-container">';
    },10);
    
    add_action('wp_footer', function(){ 
    	echo '</div> <!-- body inner -->';
    },9999);

    This wraps both header, content (and footer) with a <div> while honoring the max-width imposed to them.

    You then replace this CSS:

    .site-header, .container, .site-footer, .site-info {
    box-shadow: 0 10px 10px #555;
    }

    With this CSS:

    .body-inner.grid-container {
        box-shadow: 0 10px 10px #555;
    }
    #1598046
    Baavo551

    Thank you very much this worked! ๐Ÿ™‚

    #1598977
    Elvin
    Staff
    Customer Support

    No problem. Glad it works for you. ๐Ÿ˜€

Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.