Adding drop shadow behind transparent menu

  • Resolved jhners

    (@jhners)


    2 years, 9 months ago

    Hello,

    Is there a way I can add a drop shadow from the very top of the home page underneath the transparent menu (the home page only) so the site’s logo & menu options are easier to read?

    If possible, I’d rather use additional css than install a plugin.

    Thanks!

    • This topic was modified 2 years, 9 months ago by jhners.
    • This topic was modified 2 years, 9 months ago by James Huff. Reason: redundant link removed

    The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)
  • George Appiah

    (@gappiah)

    2 years, 9 months ago

    I’m getting “INTERNAL SERVER ERROR” from your server when I click on your link.

    Please get in touch with your hosting provider to have this resolved, so I can check the site and give you the CSS code.

    Sajjad Hossain Sajib

    (@sajibwap)

    2 years, 9 months ago

    If you have wanted to add an overlay for the homepage header, you can use the following CSS. Adding an overlay will help making the site’s logo and menu items easier to read.

    .home header:before {
    position: absolute;
    content:"";
    inset:0;
    background: #000;
    opacity: 0.4;
    z-index: -1;
}

    and add the following CSS if you wanted just a box shadow.

    .home header {
    box-shadow: -2px 0px 17px 7px #000000a6;
}

    Hope this helps you.

    Thread Starter jhners

    (@jhners)

    2 years, 9 months ago

    Great, cheers!

Viewing 3 replies - 1 through 3 (of 3 total)

The topic ‘Adding drop shadow behind transparent menu’ is closed to new replies.