0

I'm currently practicing by creating simple websites, whenever I hover on the text it moves a little bit and I do not want that. I made it so that whenever I hover over it a border appears. I used display:flex maybe that is the problem I don't really know. If there is any better way to do it, please drop it down. Much appreciated.

Here is my code

body {
  font-family: Roboto, Arial;
  margin: 0px;
}

.nav-bar {
  display: flex;
  font-size: 20px;
  justify-content: space-evenly;
  align-items: center;
  background-color: rgb(242, 242, 242);
  height: 50px;
}

.button-nav {
  padding: 5px 5px 5px 5px;
  cursor: pointer;
  border-radius: 5px;
  transition: border 0.25s;
}

.button-nav:hover {
  border: 2px solid black;
}
<nav class="nav-bar">
  <nav class="button-nav">Skills</nav>
  <nav class="button-nav">Hobbies</nav>
  <nav class="button-nav">School</nav>
  <nav class="button-nav">Career</nav>
</nav>
ThS
  • 4,597
  • 2
  • 15
  • 27
Irusu
  • 11
  • 2

3 Answers3

1

It's simple, the text isn't moving, your nav button "grows" on hovering, because you add a whole new border to the nav and with that, it's width/height increases.
The fix is simple, just add a default border to the nav, give it a transparent background, and on hovering, give it a different color!

<!DOCTYPE html>
<html>

<head>
  <style>
    body {
      font-family: Roboto, Arial;
      margin: 0px;
    }
    
    .nav-bar {
      display: flex;
      font-size: 20px;
      justify-content: space-evenly;
      align-items: center;
      background-color: rgb(242, 242, 242);
      height: 50px;
    }
    
    .button-nav {
      padding: 5px 5px 5px 5px;
      cursor: pointer;
      border-radius: 5px;
      border: 2px solid transparent;
      transition: border 0.25s;
    }
    
    .button-nav:hover {
      border: 2px solid black;
    }
  </style>
</head>

<body>
  <nav class="nav-bar">
    <nav class="button-nav">Skills</nav>
    <nav class="button-nav">Hobbies</nav>
    <nav class="button-nav">School</nav>
    <nav class="button-nav">Career</nav>
  </nav>
</body>

</html>
manjiro sano
  • 784
  • 3
  • 15
0

Actually the text doesn't really move it just appears to be. That is the result of the border you add when a .button-nav is hovered, .button-nav:hover, which adds the border and remove it when you hover and move away respectively.

The fix is fairly easy, add the border to the .button-nav selector with a transparent color and override it with the color you want in the hover state, .button-nav:hover.

Here's a live demo:

body {
  font-family: Roboto, Arial;
  margin: 0px;
}

.nav-bar {
  display: flex;
  font-size: 20px;
  justify-content: space-evenly;
  align-items: center;
  background-color: rgb(242, 242, 242);
  height: 50px;
}

.button-nav {
  padding: 5px 5px 5px 5px;
  cursor: pointer;
  border-radius: 5px;
  /** add a transparent border */
  border: 2px solid transparent;
  transition: border 0.25s;
}

.button-nav:hover {
  /** just override the transparent color you have set */
  border-color: black;
}
<nav class="nav-bar">
  <nav class="button-nav">Skills</nav>
  <nav class="button-nav">Hobbies</nav>
  <nav class="button-nav">School</nav>
  <nav class="button-nav">Career</nav>
</nav>
ThS
  • 4,597
  • 2
  • 15
  • 27
0

This is because the border take (2*4)px add to container.

Solution:

  outline: 2px solid black; /*don't add border width*/
AbdullahSaidAbdeaaziz
  • 321
  • 1
  • 11