Home Navigation items when hovered is increasing the overall size of the navigation bar

Questions

Navigation items when hovered is increasing the overall size of the navigation bar

February 3, 2023

I have created a navigation bar with a hover background color when you hover the mouse over a navigation item.

The problem is when you hover the mouse over the navigation item eg. home, the navigation bar increases in height.

HTML

  <nav class="nav" id="home">

    <a href="#" class="toggle-button">
      <span class="bar"></span>
      <span class="bar"></span>
      <span class="bar"></span>
    </a>

    <div class="navbar-links">

      <ul class="nav-list">

        <li class="nav-item"><a href="#home" class="nav-link">home</a></li>
        <li class="nav-item"><a href="#about-me" class="nav-link">about me</a></li>
        <li class="nav-item"><a href="#services" class="nav-link">services</a></li>
        <!-- <li class="nav-item"><a href="#portfolio" class="nav-link">portfolio</a></li> -->
        <!-- <li class="nav-item"><a href="#blog" class="nav-link">blog</a></li> -->
        <li class="nav-item"><a href="#contact" class="nav-link">contact</a></li>
        <!-- <li class="nav-item"><a href="#work" class="nav__link">Work</a></li> -->

      </ul>

    </div>

  </nav>

CSS

.nav {
  display: flex;
  justify-content: right;
  align-items: center;
  background-color: var(--clr-main);
}

.nav-item {
  margin-right: 10px;
  list-style: none;
}

.nav-link{
  font-size: 20px;
  text-decoration: none;
  color: var(--clr-secondary);
  font-weight: var(--fw-bold);
  display: block;
}

.nav-list{
  display: flex;
  padding: 0;
}

.nav-item:hover{
  background-color: #00a6ff;
  padding: 10px;
}

Is there a way to hover over the navigation item and not increase the size of the navigation bar? The increase in size makes the padding background color not reach the top and bottom of the navigation bar.

>Solution :

You’ll need to add padding to the nav-item class in CSS:

.nav {
  display: flex;
  justify-content: right;

  align-items: center;
  background-color: var(--clr-main);
}

.nav-item {
  margin-right: 10px;
  padding: 10px;
  list-style: none;
}

.nav-link{
  font-size: 20px;
  text-decoration: none;
  color: var(--clr-secondary);
  font-weight: var(--fw-bold);
  display: block;

}

.nav-list{
  display: flex;
}

.nav-item:hover{
  background-color: #00a6ff;
}

 <nav class="nav" id="home">

    <a href="#" class="toggle-button">
      <span class="bar"></span>
      <span class="bar"></span>
      <span class="bar"></span>
    </a>

    <div class="navbar-links">

      <ul class="nav-list">

        <li class="nav-item"><a href="#home" class="nav-link">home</a></li>
        <li class="nav-item"><a href="#about-me" class="nav-link">about me</a></li>
        <li class="nav-item"><a href="#services" class="nav-link">services</a></li>
        <!-- <li class="nav-item"><a href="#portfolio" class="nav-link">portfolio</a></li> -->
        <!-- <li class="nav-item"><a href="#blog" class="nav-link">blog</a></li> -->
        <li class="nav-item"><a href="#contact" class="nav-link">contact</a></li>
        <!-- <li class="nav-item"><a href="#work" class="nav__link">Work</a></li> -->

      </ul>

    </div>

  </nav>