Navigation bar at bottom, centerd - CSS

html css navigation

36,361

By making html and body height:100% and applying fixed positioning to your navigation.

html, body {
 height: 100%;
}

ul#navigation {
 position: fixed;
 bottom: 0;
 width: 100%;
}

Here is a jsFiddle: http://jsfiddle.net/nqKpe/1/
Feel free to resize the window and see that your navigation always remains at the bottom.

36,361

Author by

Admin

Updated on March 29, 2020

Comments

Admin about 4 years

I need a quick tip how to manage with some problem. I've created a navi bar and center it so now its in the middle of page no matter how big or small is screen, but how to make that bar to stay on the bottom of page ? I know that when i add a height to .MainContainer it push that bar to the bottom but i want to make it dependless of constant height. Big thanks for any advice!

HTML

<html>
<head>
</head>  
<body>
    <div class="MainContainer">
    </div>  
    <div id="MenuContainer">
        <ul id="navigation">
            <li class="x"><a title="1" href="indexX-1.html" >1</a></li>
            <li class="x"><a title="2" href="#" >2</a></li>
            <li class="x"><a title="3" href="#" >3</a></li>
            <li class="x"><a title="4" href="#" >4</a></li>
            <li class="x"><a title="5" href="#" >5</a></li>
            <li class="contact" class="last"><a title="6" href="#" >6</a></li>
        </ul>
    </div> 
</body>
</html>

CSS

.MainContainer {
    width: 1200px;
    background-color: #0066CC;
}
.MenuContainer {
    height: 70px;
    bottom:0;
}
ul#navigation {
    height: 70px;
    list-style: none;
    margin: 0;
    padding: 0;
    border: 1px solid #ccc;
    border-width: 1px 0;    
    text-align: center;
    font-size: 22px;
    font-family: 'Cham-WebFont', Arial, sans-serif;
    background-color: #FFF;
}
ul#navigation li {
    display: inline;
    margin-right: .75em;
    list-style: none;
    margin: 0;
    padding: 0;
}
ul#navigation li.last {
    margin-right: 0;
}