2

I have simple nav bar list and i need change item font weight on hover. But when I hover on item its width changes so other nav items position changes too. How to fix this issue?

Exampe:

.container {
  margin: 0 auto;
  max-width: 500px;
}

.nav {
  display: flex;
  justify-content: space-between;
  list-style: none;
  text-transform: uppercase;
}

.nav__item {
  font-weight: 100;
  cursor: pointer;
}

.nav__item:hover {
  font-weight: bold;
}
<html>
<div class="container">
  <ul class="nav">
    <li class="nav__item">Home</li>
    <li class="nav__item">About</li>
    <li class="nav__item">Contacts</li>
    <li class="nav__item">Donate</li>
    <li class="nav__item">FAQ</li>
  </ul>
</div>
</html>
re1mond
  • 31
  • 2

2 Answers2

4

An easy way is to set a vertical or horizontal text-shadow to mimic bold letters, transform with skew() or scale(), ... could also help making effects witouth having every thing jump .

example with an horizontal text-shadow

.container {
  margin: 0 auto;
  max-width: 500px;
}

.nav {
  display: flex;
  justify-content: space-between;
  align-items:center;
  list-style: none;
  text-transform: uppercase;
}

.nav__item {
  font-weight: 100;
  cursor: pointer;
}

.nav__item:hover {
 text-shadow: 1px 0;
}
<html>
<div class="container">
  <ul class="nav">
    <li class="nav__item">Home</li>
    <li class="nav__item">About</li>
    <li class="nav__item">Contacts</li>
    <li class="nav__item">Donate</li>
    <li class="nav__item">FAQ</li>
  </ul>
</div>
</html>
G-Cyrillus
  • 101,410
  • 14
  • 105
  • 129
1

This should help you out: Inline elements shifting when made bold on hover

Although flex isnt used in this example, the top voted solution should prove to be a working work around as the li elements's width won't react to the change in width caused by the font weight change.

sven folkerts
  • 46
  • 5