4

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!

2
  • 1
    How about position: fixed? Nov 13, 2013 at 23:37
  • That doesn't exactly finish the whole job, but thanks!
    – Deadpool
    Nov 14, 2013 at 10:08

1 Answer 1

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%;
 }
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, 2013 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, 2013 at 16:24
  • Ah that seemed to do the trick quite nicely! Much appreciated!
    – Deadpool
    Nov 14, 2013 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 4, 2018 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 5, 2018 at 18:22

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.