Title: Adding drop shadow behind transparent menu
Last modified: August 20, 2023

---

# Adding drop shadow behind transparent menu

 *  Resolved [jhners](https://wordpress.org/support/users/jhners/)
 * (@jhners)
 * [2 years, 9 months ago](https://wordpress.org/support/topic/adding-drop-shadow-behind-menu/)
 * 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](https://wordpress.org/support/users/jhners/).
    -  This topic was modified 2 years, 9 months ago by [James Huff](https://wordpress.org/support/users/macmanx/).
      Reason: redundant link removed
 * The page I need help with: _[[log in](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fwordpress.org%2Fsupport%2Ftopic%2Fadding-drop-shadow-behind-menu%2F%3Foutput_format%3Dmd&locale=en_US)
   to see the link]_

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

 *  [George Appiah](https://wordpress.org/support/users/gappiah/)
 * (@gappiah)
 * [2 years, 9 months ago](https://wordpress.org/support/topic/adding-drop-shadow-behind-menu/#post-16986563)
 * 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.
 * ![](https://i0.wp.com/i.snipboard.io/modrF9.jpg?ssl=1)
 *  [Sajjad Hossain Sajib](https://wordpress.org/support/users/sajibwap/)
 * (@sajibwap)
 * [2 years, 9 months ago](https://wordpress.org/support/topic/adding-drop-shadow-behind-menu/#post-16993457)
 * 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.
 *     ```wp-block-code
       .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.
 *     ```wp-block-code
       .home header {
           box-shadow: -2px 0px 17px 7px #000000a6;
       }
       ```
   
 * Hope this helps you.
 *  Thread Starter [jhners](https://wordpress.org/support/users/jhners/)
 * (@jhners)
 * [2 years, 9 months ago](https://wordpress.org/support/topic/adding-drop-shadow-behind-menu/#post-16994512)
 * Great, cheers!

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

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

## Tags

 * [css](https://wordpress.org/support/topic-tag/css/)
 * [drop shadow](https://wordpress.org/support/topic-tag/drop-shadow/)
 * [menu](https://wordpress.org/support/topic-tag/menu/)

 * In: [Fixing WordPress](https://wordpress.org/support/forum/how-to-and-troubleshooting/)
 * 3 replies
 * 3 participants
 * Last reply from: [jhners](https://wordpress.org/support/users/jhners/)
 * Last activity: [2 years, 9 months ago](https://wordpress.org/support/topic/adding-drop-shadow-behind-menu/#post-16994512)
 * Status: resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics