Search code examples
htmlcssresponsive-designcontainersgrid-layout

How to Create Responsive Web Page With Static Header?

I'm real happy with the header I just created:enter image description here

But unfortunately, the goal of this project is to create a responsive website using rows and columns. We were instructed to use a 12 column grid system. The first row includes everything above the navigation bar, with the logo and heading taking up the first 10 columns and the social media links taking up the last 2 columns. Originally, the heading ("knights basketball academy") and social media links were supposed to wrap beneath the logo when the page is resized. But now I'm changing my mind because the result is a disaster:enter image description here

I know it's possible to fix this, but there would be too much white space and I really only need for the nav bar and content below it to be responsive anyway. So as the page is scrunched down to mobile, it should look like this:enter image description hereenter image description hereenter image description here

Notice the logo and header do not change as the page is resized. Please help out if you know how to obtain this effect. I'm thinking it might be with a container but I'm not sure. Thank you!

HTML: 

<!DOCTYPE html>
  <html>
  <head>
    <title>Knights Basketball Academy</title>
    <meta name="viewport" content="width=device-width, 
    initial-scale=1.0">
    <link href="styles.css" type="text/css" rel="stylesheet">
  </head>

<body>
  <header>
    <div class="row">
      <!--first row-->
      <div class="col-10">

        <div class="logo">
          <a href="index.html">
            <img src="images/logo2.png" alt="logo" height="250" width="250">
          </a>
        </div>

        <div class="header">
          <img src="images/header.png" alt="header" height="250" width="880">
        </div>
      </div>
      <div class="col-2">
        <div class="social_twitter">
          <a href="#"><img src="images/twitter.png"></a>
        </div>
        <div class="social">
          <a href="#"><img src="images/facebook.png"></a>
        </div>
        <div class="social">
          <a href="#"><img src="images/youtube.png"></a>
        </div>
        <div class="social">
          <a href="#"><img src="images/instagram.png"></a>
        </div>

      </div>
    </div>
    <!--ends first row-->
  </header>


  <div class="navigation">
    <nav>
      <ul>
        <li><a href="index.html">HOME</a></li>
        <li><a href="roster.html">ROSTER</a></li>
        <li><a href="#">ABOUT</a></li>
        <li><a href="#">EVENTS</a></li>
        <li><a href="#">CALENDAR</a></li>
      </ul>
    </nav>
  </div>


  <div class="row">
    <!--second row-->

    <div class="col-3 col-m-3">
      <img src="images/image1.jpg" alt="Team Photo">
    </div>

    <div class="col-6 col-m-9">
      <h1>Welcome</h1>

      <p>Knights Basketball Academy is a non-profit amateur basketball club focused on individual player development and team concepts. With our elite coaching staff, we are confident that all players can achieve their own maximum potential while maintaining
        excellent character and integrity.
        <br>
        <br> Contact us at info@knightsbasketballacademy.com to learn how to become a Knight today.</p>

    </div>

    <div class="col-3 col-m-12">
      <aside>
        <h2>What?</h2>
        <p>This is information about the website</p>
        <h2>Where?</h2>
        <p>This website was created in St. Louis, MO.</p>
        <h2>How?</h2>
        <p>Visit our contact page for more information.</p>
      </aside>
    </div>

  </div>
  <!--ends second row-->

  <footer>
    <p>&copy;2016 KNIGHTS BASKETBALL ACADEMY</p>
  </footer>
</body>
</html>

CSS:

* {
  box-sizing: border-box;
}

.row:after {
  content: "";
  clear: both;
  display: block;
}

[class*="col-"] {
  float: left;
  padding: 10px;
}


/*global styles*/

.knights {
  margin-top: 0px
}

.logo {
  float: left;
  margin-left: 10px;
}

.header {
  float: left;
  margin-top: 10px;
  margin-left: 10px;
}

.social {
  float: left;
  margin-left: 2px;
  margin-right: 2px;
}

.social_twitter {
  float: left;
  margin-left: 80px;
}

.banner {
  display: inline-block;
  margin-left: auto;
  margin-right: auto;
}

.navigation {
  text-align: center;
  background-color: #000000;
  padding: 0px;
}

#banner {
  text-align: center;
  margin-bottom: 0px;
}

a {
  text-decoration: none;
  color: white;
}

a:visited {
  color: white;
}

nav {
  margin: auto;
  height: auto;
}

nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  font-family: Arial;
}

nav li {
  padding: 10px;
  margin-bottom: 7px;
  background-color: #000000;
  color: #ffffff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  display: block;
  margin-left: 30px;
  margin-right: 30px;
}

nav li:hover {
  background-color: #8E8E8E;
}

aside {
  background-color: #C5202A;
  padding: 15px;
  color: #fff;
  text-align: center;
  font-size: 1.1em;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
}

footer {
  background-color: #000000;
  color: #fff;
  text-align: center;
  font-size: 0.9em;
  padding: 15px;
}

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


/*mobile phones first*/

[class*="col-"] {
  width: 100%;
}


/*tablet*/

@media only screen and (min-width:600px) {
  /*12 column grid*/
  .col-m-1 {
    width: 8.33%;
  }
  .col-m-2 {
    width: 16.66%;
  }
  .col-m-3 {
    width: 25%;
  }
  .col-m-4 {
    width: 33.33%;
  }
  .col-m-5 {
    width: 41.66%;
  }
  .col-m-6 {
    width: 50%;
  }
  .col-m-7 {
    width: 58.33%;
  }
  .col-m-8 {
    width: 66.66%;
  }
  .col-m-9 {
    width: 75%;
  }
  .col-m-10 {
    width: 83.33%;
  }
  .col-m-11 {
    width: 91.66%;
  }
  .col-m-12 {
    width: 100%;
  }
  nav {
    height: auto;
  }
  nav li {
    display: inline-block;
  }
}

@media only screen and (min-width:768px) {
  /*12 column grid*/
  .col-1 {
    width: 8.33%;
  }
  .col-2 {
    width: 16.66%;
  }
  .col-3 {
    width: 25%;
  }
  .col-4 {
    width: 33.33%;
  }
  .col-5 {
    width: 41.66%;
  }
  .col-6 {
    width: 50%;
  }
  .col-7 {
    width: 58.33%;
  }
  .col-8 {
    width: 66.66%;
  }
  .col-9 {
    width: 75%;
  }
  .col-10 {
    width: 83.33%;
    height: 260px;
  }
  .col-11 {
    width: 91.66%;
  }
  .col-12 {
    width: 100%;
  }
  nav {
    height: auto;
  }
  nav li {
    display: inline-block;
    text-align: center;
  }
}
Solution

  • I got everything in the header to stay fixed, and here are the changes I made.

    HTML: 

    <header id="header-wrap">
<div id="fixed">
<div class="row"><!--first row-->
    <div id="images">


        <a href="index.html">
          <img id="logo" src="images/logo2.png" alt="logo" 
           height="250" width="250">
        </a>



        <img id="text" src="images/header.png" alt="header"
         height="250" width="880">

    <div id="socialIcons">

        <div  class="social">
        <a href="#"><img src="images/twitter.png"></a>
        </div>

        <div class="social">
        <a href="#"><img src="images/facebook.png"></a>
        </div>

        <div class="social">
        <a href="#"><img src="images/youtube.png"></a>
        </div>

        <div class="social">
        <a href="#"><img src="images/instagram.png"></a>
        </div>
    </div>
    </div>
 </div>
</div>
</header>

    CSS: 

    *{box-sizing:border-box;}

.row:after{content:"";
       clear:both;
       display:block;}

[class*="col-"]{float:left;
            padding:10px;}

/*global styles*/   
#header-wrap {position:relative;
              top:0;
              width:100%;
              min-height:260px;
              height:100%;
              z-index:9999;
              background:#fff;}

#fixed {position:fixed;
    width:100%;
    top:0;
    background-color:#fff;}

.knights {margin-top:0px}

.logo img {max-width:100%;
           height:auto;}

img#logo {width:300px;
          float:left;
          margin-left:10px;}

img#text {margin-top:50px;
          float:left;
          margin-left:70px;
          width:650px;}

#images {width:1400px;}

#socialIcons {padding-top:10px;
              margin-left:1264px;}

.fixed{position:fixed;
       width:100%;
       top:0;
       background-color;}  

.social {float:left;
        margin-left:2px;
        margin-right:2px;}

.banner {display: inline-block;
         margin-left:auto;
         margin-right:auto;}


.navigation {text-align:center;
             background-color:#000000;
             padding:0px;
             margin-top:30px;}

#banner {text-align:center;
         margin-bottom: 0px;}

a{text-decoration:none;
  color:white;}

a:visited {color:white;}

nav{margin:auto;
    height:auto;}

nav ul {
 list-style-type: none;
 margin: 0;
 padding: 0;
 font-family:Arial;}

nav li {
    padding: 10px;
    margin-bottom: 7px;
    background-color :#000000;
    color: #ffffff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    display:block;
    margin-left:30px;
    margin-right:30px;}


nav li:hover {
     background-color: #8E8E8E;}

aside{background-color:#C5202A;
      padding:15px;
      color:#fff;
      text-align:center;
      font-size:1.1em;
      box-shadow: 0 1px 3px rgba(0,0,0,0.12),
        0 1px 2px rgba(0,0,0,0.24);}

footer{background-color:#000000;
      color:#fff;
      text-align:center;
      font-size:0.9em;
      padding:15px;}

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

/*mobile phones first*/
[class*="col-"]{
width:100%;
}

/*tablet*/
@media only screen and (min-width:600px)
{

/*12 column grid*/

.col-m-1 {width: 8.33%;}
.col-m-2 {width: 16.66%;}
.col-m-3 {width: 25%;}
.col-m-4 {width: 33.33%;}
.col-m-5 {width: 41.66%;}
.col-m-6 {width: 50%;}
.col-m-7 {width: 58.33%;}
.col-m-8 {width: 66.66%;}
.col-m-9 {width: 75%;}
.col-m-10 {width: 83.33%;}
.col-m-11 {width: 91.66%;}
.col-m-12 {width: 100%;}

nav {height:auto;}

nav li {display:inline-block;}

}   

@media only screen and (min-width:768px)
{   

/*12 column grid*/

.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;height:260px;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}  

nav {height:auto;}

nav li {display:inline-block;
    text-align:center;}  

}


div.clear { clear:both;}

    So the changes that I made in the HTML were giving the header an ID, "header-wrap", changing the classes "logo", "text", and "col-2" to ID's "logo", "text", and "socialIcons", and then changing all classes within the "social Icons" div to the class "social" (getting rid of social_twitter).

    In the CSS, the changes that I made were adding "#header-wrap", "fixed", ".logo img", "img#logo", "img#text", "#images", "#socialIcons", and ".fixed".

    These changes put the three elements - the logo, the text image (knights basketball academy), and the social media links within the header wrap with a position: relative, and a div (#fixed) with position: fixed. I'm not sure which selector actually causes all three to stay fixed, but either way, adding these changes caused my header to become static.