resize navigation bar with image in middle? - html

Question

nav
{
display: table;
width: 50%;
background-color: #333;
padding: 0.50em 0.5em;
margin: 0.60em auto;
}
nav ul
{
display: table-row;
}
nav ul li
{
display: table-cell;
text-align: center;
}
a
{
text-decoration:none;
color: #d9d9d9;
}
a:hover
{
color: #e6e6e6;
}
<nav>
<ul>
<li> art <li>
<li> download </li>
<li> <img src="image/symbol.png">
<li> portfolio </li>
<li> product </li>
</ul>
</nav>
The above code is how I am so far designing my website; however, if I add the image in the middle of the bar, the bar widens to fit the image in it!
The answer has been posted, thanks again!

Answer 1

Try this
.navContain{
height:30px;
width:100%;
margin:0 auto;
background-color:red;
padding-top:30px;
}
nav{
width: 100%;
max-width:400px;
background-color: #333;
padding:0;
margin:0 auto;
overflow:visible;
height:30px;
}
nav ul{
overflow:visible;
height:30px;
margin:0;
padding:0;
}
nav ul li{
text-align: center;
overflow:visible;
height:30px;
margin:0;
padding:0;
list-style-type:none;
float:left;
width:20%;
max-width:80px;
}
a{
text-decoration:none;
margin:0;
padding:0;
color: #d9d9d9;
overflow:visible;
line-height:30px;
display:block;
position:relative;
}
a:hover{
color: #e6e6e6;
}
a img{
width:90%;
margin:0;
padding:0;
vertical-align:baseline;
position:absolute;
bottom:-30px;
right:5%;
left:5%;
}
<div class="navContain">
<nav>
<ul>
<li> art </li>
<li> download </li>
<li> <img src="http://www.chinabuddhismencyclopedia.com/en/images/thumb/b/b8/Nature.jpg/240px-Nature.jpg"></li>
<li> portfolio </li>
<li> product </li>
</ul>
</nav>
</div>