Title: Header with shadow
Last modified: August 20, 2016

---

# Header with shadow

 *  Resolved [deborahbabin](https://wordpress.org/support/users/deborahbabin/)
 * (@deborahbabin)
 * [13 years, 11 months ago](https://wordpress.org/support/topic/header-with-shadow/)
 * I am using YOKO theme and would like to have a shadow effect under the header.
   Any tips?
    I think I saw this in some other themes. The current header is too
   flat.

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

 *  [Marventus](https://wordpress.org/support/users/marventus/)
 * (@marventus)
 * [13 years, 11 months ago](https://wordpress.org/support/topic/header-with-shadow/#post-2811809)
 * Hi. Could you capture a screenshot of your site and add the shadow so that I 
   can understand where you want it?
    Also, please share a link to your site. Thanks!
 *  Thread Starter [deborahbabin](https://wordpress.org/support/users/deborahbabin/)
 * (@deborahbabin)
 * [13 years, 11 months ago](https://wordpress.org/support/topic/header-with-shadow/#post-2811813)
 * [http://www.deborahbabin.com](http://deborahbabin.com)
    i tried to do a screen
   shot but it won’t copy here. it is simple…. the header is a regular image, flat.
   i want dimension, with a shadow to one corner. the shadow would show on two sides
   the images in the gallery have a slight shadow and this looks nice. i only found
   one theme that had shadows but it was over the top. i want a clean modern look.
 *  [Marventus](https://wordpress.org/support/users/marventus/)
 * (@marventus)
 * [13 years, 11 months ago](https://wordpress.org/support/topic/header-with-shadow/#post-2811847)
 * Hi Deborah,
 * Is [this](http://imagebin.org/216393) what you have in mind?
 *  Thread Starter [deborahbabin](https://wordpress.org/support/users/deborahbabin/)
 * (@deborahbabin)
 * [13 years, 11 months ago](https://wordpress.org/support/topic/header-with-shadow/#post-2811857)
 * close! thanks so much.
    The shadow is hardly there but it is better than flat.
   Can it be increased a bit? I want a slight floating effect.
 *  [Marventus](https://wordpress.org/support/users/marventus/)
 * (@marventus)
 * [13 years, 11 months ago](https://wordpress.org/support/topic/header-with-shadow/#post-2811858)
 * How about [now](http://imagebin.org/216447)?
 *  Thread Starter [deborahbabin](https://wordpress.org/support/users/deborahbabin/)
 * (@deborahbabin)
 * [13 years, 11 months ago](https://wordpress.org/support/topic/header-with-shadow/#post-2811862)
 * that is great! I see a new line above the menu…is that because of the shadow?
   I would like the page to be clean and this line is sort of distracting.
    thanks
 *  [Marventus](https://wordpress.org/support/users/marventus/)
 * (@marventus)
 * [13 years, 11 months ago](https://wordpress.org/support/topic/header-with-shadow/#post-2811863)
 * Here are the changes you need to make to your theme’s `style.css` to implement
   that shadow:
    **1.** Change:
 *     ```
       #container {
       max-width: 770px;
       }
       ```
   
 * To:
 *     ```
       #container {
           max-width: 778px;
       }
       ```
   
 * 2. Change:
    ` #branding img { … max-width: 100%; }
 * **2.** Add this new style:
    #branding a { display: block; width: 778px; }
 *  [Marventus](https://wordpress.org/support/users/marventus/)
 * (@marventus)
 * [13 years, 11 months ago](https://wordpress.org/support/topic/header-with-shadow/#post-2811864)
 * Here are the changes you need to make to your theme’s `style.css` to implement
   that shadow:
 * **1.** Change:
 *     ```
       #container {
       max-width: 770px;
       }
       ```
   
 * To:
 *     ```
       #container {
           max-width: 778px;
       }
       ```
   
 * **2.** Change:
 *     ```
       #branding img {
       (etc...)
       max-width: 100%;
       }
       ```
   
 * To:
 *     ```
       #branding img {
       box-shadow: 5px 5px 5px #666666;
       max-width: 775px;
       }
       ```
   
 * **3.** Add this new style:
 *     ```
       #branding a {
       display: block;
       width: 778px;
       }
       ```
   
 * About the line above the menu, it was already there in your theme. However, if
   you wish to remove it, Look for this code:
 *     ```
       #access {
       border-top: 1px solid #CCCCCC;
       display: block;
       float: left;
       margin: 0 auto;
       padding: 1px 0 0;
       width: 100%;
       }
       ```
   
 * and delete the `border-top` property.
    That’s about it. Good luck!
 *  [Marventus](https://wordpress.org/support/users/marventus/)
 * (@marventus)
 * [13 years, 11 months ago](https://wordpress.org/support/topic/header-with-shadow/#post-2811914)
 * Hi!
    Did you figure this out? If so, please mark this thread as resolved. Thanks!
 *  Thread Starter [deborahbabin](https://wordpress.org/support/users/deborahbabin/)
 * (@deborahbabin)
 * [13 years, 11 months ago](https://wordpress.org/support/topic/header-with-shadow/#post-2811915)
 * thanks for the effort. i have decided to use a different theme. i think your 
   code would have worked, but i found another theme that provided the effect i 
   wanted.

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

The topic ‘Header with shadow’ is closed to new replies.

## Tags

 * [header](https://wordpress.org/support/topic-tag/header/)
 * [Shadow](https://wordpress.org/support/topic-tag/shadow/)

 * In: [Fixing WordPress](https://wordpress.org/support/forum/how-to-and-troubleshooting/)
 * 10 replies
 * 2 participants
 * Last reply from: [deborahbabin](https://wordpress.org/support/users/deborahbabin/)
 * Last activity: [13 years, 11 months ago](https://wordpress.org/support/topic/header-with-shadow/#post-2811915)
 * Status: resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics