Title: Solid site-header
Last modified: March 8, 2017

---

# Solid site-header

 *  [casierpe](https://wordpress.org/support/users/casierpe/)
 * (@casierpe)
 * [9 years, 3 months ago](https://wordpress.org/support/topic/solid-site-header/)
 * Hello everyone!
 * I would like to make a solid site-header, and not only to have a solid color,
   but to make featured content banner start right below this header and not underneath,
   on other words I don’t want part of featured content banner to be hidden by the
   header
 * Thanks for your help 🙂

Viewing 1 replies (of 1 total)

 *  [Chad Chadbourne](https://wordpress.org/support/users/shireling/)
 * (@shireling)
 * [9 years, 3 months ago](https://wordpress.org/support/topic/solid-site-header/#post-8891215)
 * Hi [@casierpe](https://wordpress.org/support/users/casierpe/)!
 * After looking at the CSS to achieve this, I’m not sure it’s practical with the
   way Dyad has been built.
 * The current header is positioned to scroll, while the featured content is fixe(
   it gets covered by the content as you scroll.
 * To make a fixed header work, we’d need to set something like this to make the
   featured content also scroll (otherwise there’s a gap when the header scrolls
   away)
 *     ```
       .blog .site-header {
           position: fixed;
           z-index: 1;
           opacity: .5;
       }
       .blog .site-banner {
           top: 114px;
       }
       ```
   
 * That looks good on some screen sizes, but on wider or narrower screens, the header
   changes height – which is fixable with a handful of media queries:
 *     ```
       @media screen and ( min-width: 401px) {
           .blog .site-banner {
               top: 66px;
           }
       }
       @media screen and ( min-width: 681px) {
           .blog .site-banner {
               top: 76px;
           }
       }
       @media screen and ( min-width: 961px) {
           .blog .site-banner {
               top: 106px;
           }
       }
       @media screen and ( min-width: 1328px) {
           .blog .site-banner {
               top: 90px;
           }
       }
       ```
   
 * But from there you have an issue with the Featured Content being cut off by the
   main content – and that’s a stickier issue. We’re now combining the heights of
   our solid header with the featured content area, which shifts as a percentage
   of the screen width – basically a moving target.
 * Feel free to play around with the above as a starting point, perhaps it will 
   be helpful! Definitely know if you come up with a solution for the overlap problem
   🙂

Viewing 1 replies (of 1 total)

The topic ‘Solid site-header’ is closed to new replies.

 * ![](https://i0.wp.com/themes.svn.wordpress.org/dyad/1.0.10/screenshot.png)
 * Dyad
 * [Support Threads](https://wordpress.org/support/theme/dyad/)
 * [Active Topics](https://wordpress.org/support/theme/dyad/active/)
 * [Unresolved Topics](https://wordpress.org/support/theme/dyad/unresolved/)
 * [Reviews](https://wordpress.org/support/theme/dyad/reviews/)

 * 1 reply
 * 2 participants
 * Last reply from: [Chad Chadbourne](https://wordpress.org/support/users/shireling/)
 * Last activity: [9 years, 3 months ago](https://wordpress.org/support/topic/solid-site-header/#post-8891215)
 * Status: not resolved