Lately, I've been working on revamping a flat design website and my focus has mainly been on the navbar. The original plan was to incorporate simple icons on a colored background that would darken when hovered over by the user's mouse. To achieve this effect, I utilized the list item background as the color and the "anchor" item for the icons. However, I wanted to add more interactivity to the navbar. I envisioned the list item expanding while keeping the simple icon unchanged in size and position in relation to the other list items. I managed to get the list item to grow and remain in its place, but encountered an issue where the background became distorted and caused the rest of the list items to shift downwards when hovered over. Here's a snippet of my CSS code:
div#nav{
width:auto;
height:43px;
padding-top:15px;
padding-right:15px;
padding-bottom:5px;
background-color:rgba(100,100,100,0.2);
border-left-color:rgba(255,255,255,0.2);
border-right-color:rgba(255,255,255,0.2);
border-right-width:1px;
border-right-style:solid;
border-left-width:1px;
border-left-style:solid;
border-top-width:1px;
border-top-style:solid;
border-top-color:rgba(255,255,255,0.2);
margin-left:auto;
margin-right:auto;
}
#nav ul{
padding:0;
list-style:none;
display:inline-block;
margin:0;
}
#nav ul li{
width:48px;
height:48px;
margin-left:15px;
display:inline-block;
background-color:#000000;
padding:0;
}
#nav ul li a{
z-index:10;
}
#googleplus{
width:48px;
height:48px;
background-image:url('images/googleplus.png');
display:block;
}
#facebook{
width:48px;
height:48px;
background-image:url('images/facebook.png');
display:block;
}
#twitter{
width:48px;
height:48px;
background-image:url('images/twitter.png');
display:block;
}
#youtube{
width:48px;
height:48px;
background-image:url('images/youtube.png');
display:block;
}
#minecraft{
width:48px;
height:48px;
background-image:url('images/minecraft.png');
display:block;
}
#nav ul li#googleplus{
background-color:#d34836;
transition:background-color;
transition-duration:0.17s;
}
#nav ul li#googleplus:hover{
background-color:#c23725;
}
#nav ul li#facebook{
background-color:#3b5998;
transition:background-color,padding,margin-left,margin-right,margin-top,margin-bottom;
transition-duration:0.17s,0.17s,0.17s,0.17s,0.17s,0.17s;
}
#nav ul li#facebook:hover{
background-color:#2a4887;
padding:5px;
margin-left:10px;
margin-right:-5px;
margin-top:-5px;
margin-bottom:5px;
}
#nav ul li#twitter{
background-color:#4099ff;
transition:background-color;
transition-duration:0.17s;
}
#nav ul li#twitter:hover{
background-color:#2077dd;
}
#nav ul li#youtube{
background-color:#de443e;
transition:background-color;
transition-duration:0.17s;
}
#nav ul li#youtube:hover{
background-color:#bc221c;
}
#nav ul li#minecraft{
background-color:#5e5645;
transition:background-color;
transition-duration:0.17s;
}
#nav ul li#minecraft:hover{
background-color:#4d4534;
}
.p-flexbox{
display: -webkit-box;
display: -moz-box;
display: box;
}
.flex-hcc{
-webkit-box-orient: horizontal;
-moz-box-orient: horizontal;
box-orient: horizontal;
-webkit-box-pack: center;
-moz-box-pack: center;
box-pack: center;
-webkit-box-align: center;
-moz-box-align: center;
box-align: center;
}
Below is a snippet of the HTML code:
<div id="nav" class="p-flexbox flex-hcc">
<ul>
<li id="facebook" ><a id="facebook" href="#" ></a></li>
<li id="twitter" ><a id="twitter" href="#" ></a></li>
<li id="youtube" ><a id="youtube" href="#" ></a></li>
<li id="minecraft" ><a id="minecraft" href="#" ></a></li>
</ul>
</div>
I'm looking for suggestions on how to make the list item expand while keeping the background image anchored in place and unaffected by the movement of the other list items. Any ideas?