Hover style that changes the font weight in css

Question

It's my first post here. English is not my primary language so i'll do my best. I'm learning CSS and HTML right now and i have a question.

I'm creating an horizontal nav bar. In my css i want to create an hover style for my links where the font weight will change. The problem is that when i change the font-weight of one of the , all my other moves a little. I want them to stay still. Do you have an idea to stop that from happening ?

Thank you for your help !

.nav-buttons {
    list-style: none;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1.75rem;
}

.buttons {
    padding: 10px;
}

.buttons a {
    color: black;
    text-decoration: none;
    font-size: 1.125rem;
    font-weight: 400;
}

.buttons a:hover {
    cursor: pointer;
    font-weight: 800;
    color: var(--hover-state);
}

.buttons a.active {
    color: var(--primary-dark);
    font-weight: 600;
}

<nav>
    <div class="nav-container">
        <h2 class="logo">some<span class="dark-blue">company</span></h2>
        <ul class="nav-buttons">
            <li class="buttons"><a href="#">Home</a></li>
            <li class="buttons"><a class="active" href="#">Products</a></li>
            <li class="buttons"><a href="#">Faq</a></li>
            <li class="buttons"><a href="#">Contact</a></li>
        </ul>
    </div>
</nav>

Does this answer your question? [Inline elements shifting when made bold on hover](https://stackoverflow.com/questions/556153/inline-elements-shifting-when-made-bold-on-hover) — Hao Wu, Aug 09 '22 at 02:00

score 0 · Answer 1 · answered Aug 09 '22 at 02:27

You can fake a font's weight by using text-shadow which doesn't change the width so yeah, you don't see the movement of other buttons.

.nav-buttons {
  list-style: none;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.75rem;
}

.buttons {
  padding: 10px;
}

.buttons a {
  color: black;
  text-decoration: none;
  font-size: 1.125rem;
  font-weight: 400;
}

.buttons a:hover {
  cursor: pointer;
  text-shadow:0px 0px 1px black;
  color: var(--hover-state);
}

.buttons a.active {
  color: var(--primary-dark);
  font-weight: 600;
}

<nav>
  <div class="nav-container">
    <h2 class="logo">some<span class="dark-blue">company</span></h2>
    <ul class="nav-buttons">
      <li class="buttons"><a href="#">Home</a></li>
      <li class="buttons"><a class="active" href="#">Products</a></li>
      <li class="buttons"><a href="#">Faq</a></li>
      <li class="buttons"><a href="#">Contact</a></li>
    </ul>
  </div>
</nav>

score 0 · Answer 2 · answered Aug 09 '22 at 03:16

Adding a width on your li class buttons will do it. Maybe something like this

.nav-buttons {
    list-style: none;
    display: flex;
    justify-content: center;
    align-items: center;
    grid-gap: 1.75rem;
}

.buttons {
    width: 50px;
    padding:10px;
}

.buttons a {
    color: black;
    text-decoration: none;
    font-size: 1.125rem;
    font-weight: 400;
}

li a:hover {
    cursor: pointer;
    font-weight: 800;
    color: var(--hover-state);

}

.buttons a.active {
    color: var(--primary-dark);
    font-weight: 600;
}

<nav>
    <div class="nav-container">
        <h2 class="logo">some<span class="dark-blue">company</span></h2>
        <ul class="nav-buttons">
            <li class="buttons"><a href="#">Home</a></li>
            <li class="buttons"><a class="active" href="#">Products</a></li>
            <li class="buttons"><a href="#">Faq</a></li>
            <li class="buttons"><a href="#">Contact</a></li>
        </ul>
    </div>
</nav>

Hover style that changes the font weight in css

2 Answers2