Debut Theme - Header Width

Chris_Larson
New Member
1 0 0

I can't seem to figure out how to set a max-width of the site header.  The maximum page-width is set to $width-site: 1200px; which looks good but it only effects everthing below the header.  The width of the header seems to be at 100% which looks very poor on wide screen monitors.  I would like the max-width of the header be the same as the page-width 1200px.  If there is a way to set the max-width of everything that would do the trick too.

I tried adding  .site-header {max-width: $width-site;}  but that didn't work.  I've spent a lot of time searching the forums for an answer but I couldn't find anything.  A little help would be greatly appreciated. 

Thank you,

-Chris

Reply 1 (1)
patrickviera
New Member
2 0 1

Hi, I'm not a professional so I might have failed to consider the implications of this code to other parts of your site, but I believe I found your answer:

In the Debut theme's theme.scss.liquid file navigate to the ".site-header{}" module and add a media query to change your site's header depending on display size.

 

@include media-query($large-up) {
max-width: 1200px;
margin: 0 auto !important;
}

 

Hope that helps.