Fixed Top Banner + Navigation

Question

I'm wondering how I can make my website have a fixed top banner with it's horizontal navigation bar, so when people scroll through the site, the banner and navigation stays in its position, while the content will scroll as normal.

HTML:

<!doctype html>
<html lang="en">

    <head>
        <meta charset="utf-8" />
        <title>Play - Learn - Grow</title>
        <link rel="stylesheet" href="main.css">
    </head>

    <body class="body">

        <span class="banner_h">
            <img src="Images\Top_Banner_4.png" alt="Banner" height="150" width ="1240" />
        </span>

        <nav>
            <ul class="nav">
                <li><a href="index.html">Home</a></li>
                <li><a href="about.html">About Us</a></li>
                <li><a href="contact.html">Contact Us</a></li>
                <li><a href="membership.html">Become a Member</a></li>
                <li><a href="borrow.html">Borrow Toys</a></li>
                <li><a href="policies.html">Our Policies</a></li>
                <li><a href="sitemap.html">Site Map</a></li>
            </ul>
        </nav>

        <span class="banner_l">
            <img src="Images\Side_Banner.jpg" alt="Banner" />
        </span>

        <span class="banner_r">
            <img src="Images\Side_Banner.jpg" alt="Banner" />
        </span>

        <h2 class="headers">Welcome to the Home Page!</h2>

        <div class="container">

            Our aim is to provide the children of the community with an ever-changing variety of educational and fun toys to enhance
            their cognitive, social, emotional and physical development in the important first six years of their lives.

            <br><br><span class="Links">Be sure to check out our Wikispace site with more information <a href="http://mysocialmediatools-pn.wikispaces.com/">here</a>!</span>

        </div>

        <div id="content"></div>

        <div id="footer">
            Copyright &copy 2013
        </div>


      </body>

</html>

CSS:

/* Entire Document CSS */
html{
    height: 100%;
}
/* Header CSS */
.headers{
    color: #FFD89A;
    text-align: center;
    padding: 10px;
}
/* Body CSS */
.body{
    background-color: #61B329;
    height: 50%;
    color: #FFFFFF;
}
.container{
    margin: 0 auto 0 auto;
    width: 50em;
    text-align: center;
    padding-bottom: 500px;
    height: 50%;
}
/* Navigation CSS */
.nav {
    display: inline-block;
    background-color: #00B2EE;
    border: 1px solid #000000;
    border-width: 1px 0px;
    margin: 0;
    padding: 0;
    min-width: 1000px;
    width: 100%;
}
.nav li {
    list-style-type: none;
    width: 14.28%;
    float: left;
}
.nav a {
    display: inline-block;
    padding: 10px 0;
    width: 100%;
    text-align: center;
}
/* Banner / Picture CSS / Text in Images */
.banner_l{
    float: left;
}
.banner_r{
    float: right;
}
.banner_h{
    display: block;
    width: 100%;
}
.banner_h img{
    width: 100%;
}
/* Footer CSS */
#footer {
 clear: both;
 position: relative;
 z-index: 10;
 height: 3em;
 margin-top: -3em;
}
#content {
    padding-bottom: 3em;
}
/* Link CSS */
a:link{
    color: #FFFFFF;
    text-decoration: none;
}
a:visited{
    color: #FFFFFF;
    text-decoration: none;
}
a:hover{
    background-color: #028482;
    color: #FFFFFF;
    text-decoration: underline;
}
a:active{
    background-color: #FCDC3B;
    color: #AA00FF;
    text-decoration: overline;
}
.Links A:hover{
    color: #028482;
    background-color: transparent;
    text-decoration: underline overline;
}

Thanks!

How about position: fixed? – hugo der hungrige Nov 13 '13 at 23:37 — hugo der hungrige, Nov 13 '13 at 23:37
That doesn't exactly finish the whole job, but thanks! – Deadpool Nov 14 '13 at 10:08 — Deadpool, Nov 14 '13 at 10:08

jabs83 · Accepted Answer · 2013-11-13T23:48:42.760

8

You will have to wrap both your banner and the navigation in a fixed position element

HTML(header only)

<header>
    <span class="banner_h">
        <img src="Images\Top_Banner_4.png" alt="Banner" height="150" width ="1240" />
    </span>

    <nav>
        <ul class="nav">
            <li><a href="index.html">Home</a></li>
            <li><a href="about.html">About Us</a></li>
            <li><a href="contact.html">Contact Us</a></li>
            <li><a href="membership.html">Become a Member</a></li>
            <li><a href="borrow.html">Borrow Toys</a></li>
            <li><a href="policies.html">Our Policies</a></li>
            <li><a href="sitemap.html">Site Map</a></li>
        </ul>
    </nav>
</header>

CSS:

 header {
     position:fixed;
     top: 0;
     left: 0;
     width: 100%;
 }

edited Nov 13 '13 at 23:48

answered Nov 13 '13 at 23:43

jabs83

190
5

Unfortunately, the entire 'header' just covers the main content now, the entire page (excluding the header) has moved up, and has now been covered up by the header. – Deadpool Nov 14 '13 at 10:10
2

You will need to add padding to the top of the body tag to compensate for the fixed height header. For example - body{padding-top: 100px;} – jabs83 Nov 14 '13 at 16:24
Ah that seemed to do the trick quite nicely! Much appreciated! – Deadpool Nov 14 '13 at 21:28
I wonder how to create an interactive top banner similar to the one on stack-overflow. I am looking for a complete guide or template or book, etc.. – mtleis Apr 04 '18 at 21:46
I actually double up my dynamic menu on top of itself, so it takes the same amount of room fixed and on the page. This works nicely except on iPhones which reveal the trick if you scroll too hard. – PRMan Oct 05 '18 at 18:22

Fixed Top Banner + Navigation

1 Answers1