KevInSol KevInSol - 1 month ago 7
CSS Question

responsive CSS - display:inline UL breaking into 2 lines, seems to have enough space

I'm doing a responsive site and have navigation in the header using a UL set to display:inline. In a PC there will be a logo on the left and nav on the right. As screen size goes down, the nav will slide under the logo, both centred 768 to 400 wide and to the right below 400.

The UL is inside a container div and the problem is that as I resize my browser in the 460- 420 range (exact values seem to change with browser) my nav UL breaks onto 2 lines, even though there is space for it to stay on 1 line within its container div.

Thanks.

enter image description here

Codepen

http://codepen.io/anon/pen/LRqbAO

HTML

<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>&euro;21.45</li>
<li class='pipe_char'>|</li>
<li class='fasize'><i class="fa fa-search"></i></li>
</ul>
</div>


</header>


CSS

@import url(https://fonts.googleapis.com/css?family=Lato:400,100,300italic,300,100italic,400italic,700,700italic,900,900italic);
* {
margin: 0;
padding: 0;
-webkit-padding-start: 0;
}

body {
color: #444444;
font-size: 16px;
font-family: Lato;
margin:0px;
}

@media (max-width: 768px) {
header{ background-color:black; height:150px; }
}

@media (min-width: 769px) {
header{ background-color:black; height:134px; }
}



.hamburger {padding:5px 8px;float:left;border:1px dashed white;}
.hamburger i {color:white;font-size: 40px;}



.logo {padding:5px;float:left;border:1px dashed white;}


.shopping_nav {
float:right;
padding:5px;
color:white;
border:1px dashed red;
text-align:right;
}


.shopping_nav ul, .shopping_nav li {
display:inline;
font-size: 14px;
padding: 4px;
margin: 0px;
}



.shopping_nav ul {
border:1px solid green;
}



.shopping_nav .pipe_char {color:white;font-size: 26px;}
.shopping_nav .fasize {color:white;font-size: 24px;}


@media (max-width: 420px) {
.shopping_nav ul, .shopping_nav li {
display:inline;
font-size: 13px;
padding: 2px;
}
.shopping_nav .fasize {color:white;font-size: 20px;}
}

.shopping_nav li {display:inline-block;text-align:left;}




@media (max-width: 768px) {
.logo {max-width:338px;margin: 0 auto;float: none;}
.shopping_nav {max-width:380px;margin: 0 auto;float: none;}
}



@media (max-width: 400px) {
.logo {max-width:338px;float: right;}
.shopping_nav {padding:5px;max-width:380px;float: right;}
}



@media (max-width: 460px) {
.logo {width:250px;}
}


@media (min-width: 769px) {
.hamburger {display:none;}
}

Answer

Just remove display: inline from .shopping_nav ul

http://codepen.io/anon/pen/WGPRQQ