Menu
So, I have a navigation bar. I want each link text to grow and bold when on hover. I have achieved this using css, but now whenever teh mouse hovers over the link the text size grows,b ut so does the div to accomodate that text. Any ideas on how to fix this. Here is the jsfiddle link:
jsfiddle
CODE:
<!DOCTYPE html>
<body>
<div id = "navigation">
<ul id = "nav">
<li><a href = "mechadogs.org/home" class = "navlink">Home</a></li>
<li><a href = "mechadogs.org/team" class = "navlink">Our Team</a></li>
<li><a href = "mechadogs.org/gallery" class = "navlink">Gallery</a></li>
<li><a href = "mechadogs.org/community" class = "navlink">Community</a></li>
<li><a href = "mechadogs.org/first" class = "navlink">FIRST</a></li>
</ul>
</div>
</body>
#navigation{
background-color:black;
width:98%;
font-family:calibri;
padding:1%;
margin-left:0px;
position:absolute;
top:0;
left:0;
display:block;
}
#nav{
list-style-type:none;
}
ul#nav li{
float:left;
padding:0 6%;
}
.navlink{
display:block;
background-color:black;
text-decoration:none;
color:white;
}
.navlink:hover{
font-weight:bold;
font-size:14pt;
}
655
To fix the horizontal pushing:
Instead of using padding to space the items apart, one solution is to use width and text-align: center; so that the items don't push the other items after them.
To fix the vertical pushing:
One solution is to specify a line-height equal to the largest font-size (which would be your :hover size)
#navigation{
background-color:black;
width:98%;
font-family:calibri;
padding:1%;
margin-left:0px;
position:absolute;
top:0;
left:0;
display:block;
}
#nav{
list-style-type:none;
}
ul#nav li{
float:left;
width: 15%;
text-align: center;
}
.navlink{
display:block;
background-color:black;
text-decoration:none;
color:white;
line-height:14pt;
}
.navlink:hover{
font-weight:bold;
font-size:14pt;
}<!DOCTYPE html>
<html>
<body>
<div id = "navigation">
<ul id = "nav">
<li><a href = "mechadogs.org/home" class = "navlink">Home</a></li>
<li><a href = "mechadogs.org/team" class = "navlink">Our Team</a></li>
<li><a href = "mechadogs.org/gallery" class = "navlink">Gallery</a></li>
<li><a href = "mechadogs.org/community" class = "navlink">Community</a></li>
<li><a href = "mechadogs.org/first" class = "navlink">FIRST</a></li>
</ul>
</div>
</body>
</html>Add a max-height: 30px; to #navigation.
In general, if you are looking for something that transform shape/size aesthetically, it's easier to work with min/max width in pixels, rather then %.
42
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
