Nav element fix too stay at one line

Question

When browser window is a little smaller than full screen the nav is going in two lines... I have a lot of elements in that nav... Any ideas how too make stay on one line?

CSS:

nav {
    position : absolute;
    top : 10%;
    left : 8%;
    background : #A2A2A2;
    width : 80%;
    height:5%;
    font-size : 20px;
    margin-left : 2%;
    box-shadow : 0 4px 2px -2px gray;
    text-align: center;
}

HTML:(i removed the real link for a better understand)

    <nav>|
            <a id="active" class="meniu" href="#">Home</a> | 
            <a class="meniu" href="el2/">Element 2</a> | 
            <a class="meniu" href="el3/">Element 3</a> | 
            <a class="meniu" href="el4/">Element 4</a> | 
            <a class="meniu" href="el5/">Element 5</a> | 
            <a class="meniu" href="el6/">Element 6</a> |&nbsp;
        </nav>

I use:

• html5
• css3
• DOCTYPE html

Thanks.

Answer 1

HTML:

<nav class="primary-nav" role="navigation">
    <ul class="primary-nav-list">
        <li><a href="#" title="Item 1">Item 1</a></li>
        <li><a href="#" title="Item 2">Item 2</a></li>
        <li><a href="#" title="Item 3">Item 3</a></li>
    </ul><!--//END .primary-nav-list-->
</nav><!--//END .primary-nav-->

CSS:

.primary-nav-list {
    list-style: none;
    text-align: center;
}

.primary-nav-list > li {
    display: inline-block;
}

.primary-nav-list > li > a {
    padding: 5px 8px;
    background: #cccccc;
    display: block;
    text-decoration: none;
}

.primary-nav-list > li > a:hover {
    background: #f9f9f9;
}

If the parent container is set as a percentage, and the window's width compromises the combined width of the inline "li" elements, they're going to drop to the next line. I suggest using media queries to detect your browser's width and reorganize the elements (responsive), or set a fixed width to the parent container.

Answer 2

For obtaining what you want, you should use:

nav  {
    white-space: nowrap;
}

I think it isn't the best approach. I'd suggest you to use a responsive layout. Starting from a mobile view, you should implement CSS rules for your web application.

An example is the following one:

<nav>
    <a href="#" id="equiv">&equiv;</a>
    <ul>
        <li><a href="#">link1</a></li>
        ....
    </ul>
</nav>

nav:hover ul, nav:active ul, nav:focus ul {
    display: block;
}

nav ul {
    clear:both;
    display: none;
}

nav ul li a {
    display: block;
}

@media (min-width: 37em) {

nav #equiv {
    display: none;
}

nav ul {
        display: block;
}
}

You could hide the menu, showing a menu button for opening/closing it, for all mobile devices and using a media query to show it in the other ones (tablet, desktop).