How to make responsive Fixed Header with CSS 3 and html5

0
votes

I am trying to make a simple and responsive layout. I am able to make the #container and #content responsive, but the fixed #header remains in-place and overflows when resizing the browser window. Is there anyway to have a centered, fixed, header at a specific length, that is responsive? If you resize the browser window by pushing it to the left, you will see what I am talking about. I feel like the solution is simple and only requires CSS?

Here is the example web page Sample Site

Also, side question: If I were to add an Image in the header, would the same (potential) solution apply?

2
htmlcss

2 Answers

2
votes

The only way I found it to be working with css was by giving appropriate left and right attribute to the header.

#header {
position: fixed;
top: 0;
text-align:center;
background-color: grey;
right:10%;
left:10%;
}

This might not be exactly what you are looking for, but could be helpful.

Here is link to jsfiddle

-1
votes

Here is the code for my most recent responsive fixed header. I hope this helps.

HTML

  <div id="header">
      <p id="headerp">Ryan Noack</p>
    <table id="table">
         <tr>
          <td id="headertd1"><a href="bio.html">Bio</a></td>
          <td id="headertd2"><a href="Video.html">Videos</a></td>
          <td id="headertd3"><a href="https://www.google.com/calendar/render?mode=day&date=20150205T165337&pli=1#h%7Cmonth-3+23105+23132+23109" >Calendar</a>
          </td>
        </tr>
    </table>
  </div>

CSS

@media only screen and (min-width: 1800px) and (max-width: 2250px) {

body{
    background-image: url(abstract_0014.jpg);
    background-size: cover;
    postition: relative;
    align: center;
    margin: auto;
    height: 100%;
    max-width: 1950px;

}

Note the max-width of 1950px. This will keep your Header from getting too streched out on larger screen sizes. Using the body as the container, header will span entire width of the body. 

#header{

    position: relative;
    background-size: 100%;
    border-radius: 20px;
    margin: 0 auto;
    padding-bottom: 1%;
    padding-top: 1%;

}
}