Fixed nav bar underneath a fixed header

Question

So I have a html page and a fixed image as my header but i want to also have a fixed navbar right underneath where i can have buttons that link to another page on my server

here is my code

<!DOCTYPE HTML PUBLIC>
<title>Equinox Web Chatroom Server</title>
<style type="text/css">
body{
margin:0;
padding:header-<length> 0 0;
}
div#header{
position:absolute;
top:0;
left:0;
width:500%;
height:header-<length>;
}
@media screen{
body>div#header{
position:fixed;
}
}
* html body{
overflow:hidden;
}
* html div#content{
height:100%;
overflow:auto;
}
</style>
<div
id="header"><img src="http://192.168.0.143/images/header.png"       width="1700" height="46" alt="logo"<br>
<p>
  <table>
    <tr>
  <td bgcolor= "black"><a href="http://192.168.0.143" color="cyan"style="text-decoration: none">Server Index</a>&nbsp<a href="http://192.168.0.143/chat.html" style="text-decoration: none">Chat Room</a></td>
   </tr>
 </table>
</p><br>
</div>

So, what's wrong with mimicking the header's CSS or adding the navbar into the "header"? — ivan_pozdeev, Aug 09 '15 at 13:39

Michael Benjamin · Accepted Answer · 2017-08-23T15:24:35.440

If you want to fix elements in place in relation to the viewport, then the CSS position: fixed property is the right way to go.

This might be what you're trying to do: http://jsfiddle.net/hh1kuxyh/

As you scroll up and down you'll notice the header and navigation bar stay in place.

HTML

<div id="container">
    <div id="header"><h2>HEADER IMAGE</h2></div>
    <div id="navbar"><span>NAVIGATION MENU</span></div>
</div>

<div id="main-content">
    <p>lots of text here</p>
</div><!-- end #main-content -->

CSS

* {
    margin: 0;
    padding: 0;
}

#container {
    width: 98%;
    height: 230px;
    position: fixed;
    top: 0;
}

#header {
    height: 150px;
    background-color: chartreuse;
    text-align: center;
}

#header h2 {
    padding-top: 25px;
}

#navbar {
    height: 75px;
    background-color: #aaa;
    text-align: center;
    border: 2px solid black;
}

#navbar span {
    line-height: 75px;
    font-weight: bold;
}

#main-content {
    margin-top: 235px;
}

If you want to fix an element in place in relation to another element, then you may need to use a bit of jQuery. http://jsfiddle.net/8086p69z/8/

Also see my two answers here:

Position fixed within container element instead of the browser / viewport

Lastly, I tried to work with your code but it contained many errors. For example, your code block is missing the <html>, <body> and <head> elements.

Always run your code through the W3C Mark-Up Validation Service to check for errors and standards compliance.

Hope this helps. Good luck!

Fixed nav bar underneath a fixed header

1 Answers1