CODEWITHSUNDEEP
htmlcss
Kraishan
Kraishan

Reputation: 455

Navbar item moves down when resizing

I'm creating my first responsive website. I have a navbar inside a container that is centered horizontally. Everything has a size with a percentage (is there a term for this?). The navbar scales down when I resize the window correctly. But my last list item (navbar item) will move down.

I have tried a lot with the min-width stuff, and I know it has something to do with this. But all solutions on the internet say I should give the navbar (or the ul?) a fixed width (xxxx px). This I don't want because I want it to fully scale.

HTML:

<body>
<div id="container">
<nav>
    <ul>
        <li><span class="navbaritem">Test1</span></li>
        <li><span class="navbaritem">Test2</span></li>
        <li><span class="navbaritem">Test3</span></li>
        <li><span class="navbaritem">Test4</span></li>
        <li><span class="navbaritem">Test5</span></li>
    </ul>
</nav>
</div>
</body>

CSS: 

    @charset "utf-8";
/* CSS Document */

html
{
        width:100%;
    height:100%;
}
body
{
    background-image:url(images/background.png);
    background-repeat:repeat;
    min-height:100%;
    margin:0px;
    overflow: auto;
}
#container
{
    height:100%;
    width:73.20%;
    background-color:#00CC00;
    margin: auto;
    left:0; right:0;
    top:0; bottom:0;
    position:absolute;
}
#navbar
{
    min-width:100%;
    min-height:13.28125%;
    position:absolute;
    background-color:#FF0000;
}
nav {
    position:relative;
    background-color:#FF0000;
    color: #888;
    display: block;
    width:100%;
    height:13.28125%;
}
nav ul
{
    list-style-type:none;
    width:100%;
    height:100%;
    margin:0;
    padding:0;
}
nav li
{
    display: table;
    float:left;
    border-style: solid;
    border-width: 1px;
    border-color:#333;
    width:20%;
    height:100%;
    text-align:center;
    box-sizing:border-box;
}
.navbaritem
{
    font-family: Cambria;
    color:#CCCCCC;
    font-size:36px;
    display: table-cell;
    vertical-align: middle;
}

Upvotes: 0

Views: 3783

Answers (1)

Billy
Billy

Reputation: 1043

You can change the width of the menu item to 20% and apply box-sizing:border-box. Your problem was due to insufficient width at smaller screen sizes when you are mixing border size in px and width in %.

See the fiddle

Upvotes: 2

Related Questions