Currently working on a responsive website with navigation in the header using a UL set to display: inline. On desktop, there will be a logo on the left and navigation on the right. As the screen size decreases, the navigation will slide under the logo, both centered between 768 to 400 pixels wide and to the right below 400 pixels.
The UL is nested inside a container div, and the issue arises when resizing the browser within the 460-420 pixel range (exact values may vary across browsers). The navigation UL breaks into two lines instead of staying on one line within its container div, even though there is enough space for it to remain on a single line.
https://i.sstatic.net/aGviZ.png
For code examples, check out:
http://codepen.io/anon/pen/LRqbAO
Snippet of HTML code:
<header>
<div class="hamburger">
<a href="javascript:void(0);" onclick="myFunction()"><i class="fa fa-bars"></i></a>
</div>
<div class="logo">
<img src='design/testlogo.png' style='width:100%;max-width:338px;'>
</div>
<div class="shopping_nav">
<ul>
<li class='fasize'><i class="fa fa-location-arrow"></i></li>
<li>Ireland<br>(Change)</li>
<li class='pipe_char'>|</li>
<li class='fasize'><i class="fa fa-globe"></i></li>
<li>Shipped<br>Globally</li>
<li class='pipe_char'>|</li>
<li class='fasize'><i class="fa fa-shopping-basket"></i></li>
<li>2 items<br>€21.45</li>
<li class='pipe_char'>|</li>
<li class='fasize'><i class="fa fa-search"></i></li>
</ul>
</div>
</header>
Snippet of CSS code:
/* CSS styles go here */