0

When the user hovers over the element. It increases the font weight. Is it possible to make it so it doesn't move the elements besides it? Right now since the font weight increases, the space int takes increases and so the element gets bigger. 

.top-nav {
  list-style: none;
  margin-top: 50px;
  float: right;
  margin-right: 30px;
}
.top-nav li {
  margin-right: 30px;
  display: inline-block;
}
.top-nav li a:link,
.top-nav li a:visited {
  font-size: 120%;
  padding: 5px 10px;
}
.top-nav li a:hover,
.top-nav li a:active {
  background-color: #1BA39C;
  font-weight: 700;
  overflow-x: hidden;
}
<nav>
  <ul class="top-nav">
    <li><a href="#">Kāpēc ProFoto</a>
    </li>
    <li><a href="#">Portfolio</a>
    </li>
    <li><a href="#">Par mani</a>
    </li>
    <li><a href="#">Atsauksmes</a>
    </li>
    <li><a href="#">Foto plāni</a>
    </li>
  </ul>
</nav>
j08691
  • 204,283
  • 31
  • 260
  • 272
TacoCat
  • 459
  • 4
  • 21
  • just remove the css of hover which increase the size of font or you want font size increasing on hover? – Leo the lion Jun 30 '15 at 13:04
  • Yeah, I want the font weight to increase. – TacoCat Jun 30 '15 at 13:04
  • 2
    Set the width of the list items. – j08691 Jun 30 '15 at 13:07
  • This question and answer may help you: http://stackoverflow.com/questions/556153/horiz-css-menu-text-shifting-on-bold-hover – Goombah Jun 30 '15 at 13:08
  • or here: http://stackoverflow.com/questions/17650360/change-of-font-weight-to-bold-is-unwantingly-changing-width-of-element – Tomek Sułkowski Jun 30 '15 at 13:08
  • @j08691 that messes up the Navigation. Since the text differs in nav. – TacoCat Jun 30 '15 at 13:10
  • @TacoCat, add this line letter-spacing: -1px; in .top-nav li a:hover, .top-nav li a:active{} and all will be ok. – Leo the lion Jun 30 '15 at 13:24
  • @Leothelion I tried that, but it just reverses the thing, now it "sucks in" the elements. I looked at the after solution in one of the questions mentioned, but for some reason it doesn't work. What do I type in the attr( ??? ) I've never seen this element before. – TacoCat Jun 30 '15 at 13:32
  • but for me its working and not taking any extra space.just add this line in your code and it will work..can you please show me the site where you are facing this issue? – Leo the lion Jun 30 '15 at 13:35
  • @Leothelion maybe it is because I'm using font-weight: 700 not bold – TacoCat Jun 30 '15 at 13:50

0 Answers0