I need help with my navigation bar design. I have successfully implemented a hover effect that increases the text size on hover. However, when the text size changes, the other links shift down slightly and push the remaining links to the right (except the last one).
This is the code I am currently using:
/* -----------------------------------------------------------------*/
html, body {
margin:0;
padding:0;
}
.header {
margin-top:-7px;
background-color:#333333;
height:70px;
}
.container {
max-width: 940px;
margin: 0 auto;
padding: 30px 10px;
}
.nav {
list-style-type: none;
margin: 0;
padding: 0px 0;
color:white;
}
.nav li {
color: #fff;
display: inline;
font-family: 'Raleway', sans-serif;
font-weight: 600;
font-size: 15px;
margin-right: 25px;
text-transform: uppercase;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
}
/* NAV PROPERTIES */
.nav li:hover{
cursor: pointer;
font-size:18px;
text-shadow:0px 0px 5px white;
margin-top: 10px;
padding: 6px;
}