Fluid Horizontal NavBar for responsive website

Question

Im trying to make a fluid responsive web that contains an horizontal navbar, my problem is that at a certain width of the browser window the elements of the bar start to relocate one on top each other, is there any way to avoid this behavior in order to make the navbar just stretch until a certain media query break point. I need to website to look al least decent in the ranges where the querys are not activated.

Here's how things look so far: http://wearehellyeah.com/test/home_formacio.html

<div class="barra">
            <!--Menu Principal-->
            <nav class="menu-principal">
                <ul class="menu">
                    <li class="item sub"><button type="button" id="menu-lateral" class="sb-toggle-left"><img src="img/iconos/menu.png" alt="search"></button></li>
                    <li class="item"><a href="#">Actualitat</a></li>
                    <li class="item"><a href="#">Activitat de l'oficina</a></li>
                    <li class="item"><a href="#">Vocalies</a></li>
                    <li class="item"><a href="#">Formació</a></li>
                    <li class="item"><a href="#">Serveis</a></li>
                    <li class="item"><a href="#">Actualitat</a></li>
                    <li class="item no-border"><a href="#" class="no-border">El Col-legi</a></li>
                    <li class="item home"><a href="#" class="no-border">Marcar com pàgina d'inici</a></li>
                    <li class="item conectados">Conectados 103</li>
                    <li class="item"><button type="button" id="search"><img src="img/iconos/search.png"></button></li>
                </ul>
            </nav>
            <!--Fin Menu Principal-->
            <!--Input buscador-->
            <div class="buscador">
                <form action="">
                    <input type="text" id="ip-search">
                </form>
            </div>
            <!--Fin de Input Buscador-->
</div>

The CSS:

.barra {
background: #00b1da;
width: 100%;
padding: 0;
}

.menu-principal {
height: 36px;
line-height: 35px;
margin: 0 auto;
max-width: 1024px;
position: relative;
width: 100%;
}

.menu {
padding: 0;
margin: 0;
}

.menu .item {
float: left;
list-style: none;
}

.menu .item a {
border-right: 1px solid #008ba9;
color: #fff;
font-size: 13px;
padding: 0 .98em;
text-decoration: none;
white-space: nowrap;
}

.menu .sub {
background: #008ba9;
padding: 0 .4em;
height: 35px;
display: block;
}

.conectados {
background: #fff;
color: #4b585b;
font-size: 13px;
padding: .1em 1em 0 2.3em;
position: relative;
}

.menu .home {
background: url("../img/iconos/home.png") no-repeat 2% #00a9a1;
border-left: 1px solid #40c2d3;
padding: 0 0 0 1em;
}

Answer 1

You could add a min-width:

.menu-principal {
    min-width:883px;
}

Then it won't go on top of each other. However there are too many options on the navigation bar, you might want to make it a drop-down box when it goes into a mobile media-query range. e.g. http://vagish.com (as you make the browser width smaller, it changes the navigation bar)

You could have a media query which takes place between 768px and 880px, and reduces the spacing between menu items, and this should be able to make it look fine until you hit the 768px media query.

This would work (along with the CSS above):

@media all and (max-width: 768px) and (min-width: 880px) {
    .menu-principal {
        padding:0px;
    }
    .menu-med .item a {
        padding:0 .69em;
    }
}