Menu icon Foundation
Foundation 5 full-width header

What is the CSS/Sass code for a full-width header like on http://foundation.zurb.com/develop/download.html?
My current code is in app.scss is:

header {
  @include grid-row;
  
  .logo  { @include grid-column($columns:3, $center:true); }
  padding-bottom: em-calc(10px);
  background-image: url('../img/header.jpg');
  background-size: cover;
  h1 {
    color: white;
    font-weight: 300;
  }
  h4 {
    color: #cccccc;
    font-weight: 300;
  }
}

header

What is the CSS/Sass code for a full-width header like on http://foundation.zurb.com/develop/download.html?
My current code is in app.scss is:

header {
  @include grid-row;
  
  .logo  { @include grid-column($columns:3, $center:true); }
  padding-bottom: em-calc(10px);
  background-image: url('../img/header.jpg');
  background-size: cover;
  h1 {
    color: white;
    font-weight: 300;
  }
  h4 {
    color: #cccccc;
    font-weight: 300;
  }
}
Rafi Benkual almost 6 years ago

#header, #footer {

                float:left;
    padding:15px 0;
    width:100%;
  }
#header, #footer {
width: 100%;
margin-left: auto;
margin-right: auto;
margin-top: 0;
margin-bottom: 0;
max-width: 62.5rem;

Dale Hollocher over 5 years ago

Where does the number 62.5 rem come from? Is that arbitrary? It didn't work quite right for me butI seemed to accomplish the goal by setting max-width: to 100%, but then that didn't quite work because when the screen is too small the header acts funny.

sudheer over 5 years ago

max-width is default set to 1000px in foundation.In order to have full screen width set max-width to none.

#header, #footer {

                float:left;
    padding:15px 0;
    width:100%;
max-width: none;

  }
#header, #footer {
width: 100%;
margin-left: auto;
margin-right: auto;
margin-top: 0;
margin-bottom: 0;
}

Darius Schindler over 5 years ago

I have the problem on http://us-patriots.hol.es/

could you help me please? on very big screens it shows my header image left floated

<div class="row fullWidth">
    <img src="img/header.jpg" alt="header-picture">
</div>
.fullWidth {
   width: 100%;
   margin-left: auto;
   margin-right: auto;
   max-width: initial;
}

Asif over 5 years ago

@Darius Schindler

Set the width of the image to 100%, that should solve your issue:

Something like this:

img {
max-width: 100%;
width: 100%;
}

Hope this helps