Navbar li goes to next line upon resize - html

Question

I have a navbar on my website, which is made up of a ul and some lis inside. The last li, Log Out, has to be right aligned. The problem is, when the screen is resized too small, it goes to a line below to prevent running into the other lis.
Here's the HTML for the navbar:
<div class="navbar">
<ul>
<li>Home</li>
<?php if ($user->logged_in) { ?>
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
<li style="margin-right: 10px; float: right;">Log Out</li>
<?php } ?>
</ul>
and the CSS:
/* Navbar */
.navbar {
background: #DDDDDD;
overflow: hidden;
width: 100%;
}
.navbar ul {
border: solid 1px #BBBBBB;
margin: 0;
min-width: 600px;
overflow: hidden;
}
.navbar ul li {
border: solid transparent;
border-width: 0 1px 0 1px;
cursor: pointer;
display: inline-block;
float: left;
padding: 16px;
}
.navbar ul li:hover {
background-image: url("../images/patterns/background.png");
border-color: #369643;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
color: #FFFFFF;
text-shadow: 0 1px 0 #167F39;
}
.navbar ul li a {
color: inherit;
display: block;
text-decoration: none;
width: 100%;
}

Answer 1

Your question isn't too clear but I'm assuming you don't want the "logout" element to go below the other nav elements. The problem is in your css where your setting a "min-width" to your 'navbar ul' element. Therefore when the screen is reduced below that width it is being hidden.
I say hidden because after executing your code the "logout" element doesnt go below other nav elements it is just completely hidden. (Using Safari).
Deleting the 'min-width' fixed that problem for me. Hope it does for you too.

Answer 2

It works well in jsfiddle as well as in local browser.. Overflow is already added.
/* Navbar */
.navbar {
background: #DDDDDD;
overflow: hidden;
width: 100%;
}
.navbar ul {
border: solid 1px #BBBBBB;
margin: 0;
min-width: 600px;
}