I'm trying to create a responsive navbar where each item gets its' background highlighted (color change to higher saturation) on hover. However, only the link text gets highlighted.

I'm using a flexbox container with evenly distribution, plus a logo with margin-right:auto so it stays fixed at the left side.

What I want is getting the whole space (as seen in the dev console ) highlighted on hover. After digging around, I believe that area highlighted using the dev-console is the margin, thus the question title.

I figured it out using padding but it looks sketchy, it jumps around so it's far from ideal.

Here's my code:

* {
  margin: 0;
  padding: 0;
}

.top-nav {
  background-color: rgb(148, 174, 186);
  height: 120px;
  display: flex;
  justify-content: space-evenly;
}

.logo {
  height: 100px;
  margin-right: auto;
}

.nav-links {
  font-family: 'Montserrat';
  font-style: bold;
  text-align: center;
  margin: auto;
  font-size: 45px;
  color: white;
  text-decoration: wavy; //don't mind this, just how I managed to clear the links default styling
  height: auto;
}

.nav-links:hover {
  background: rgb(39, 136, 180);
  color: black;
}

<div >
  <a  href="index.html"><img  src=img/Logotipo.png> </img>
  </a>
  <a  href=m y-bio.html>MY BIO</a>
  <a  href=e xperience.html>EXPERIENCE</a>
  <a  href=projects.html>PROJECTS</a>
  <a  href=hire-me.html>HIRE ME!</a>
</div>

I was thinking about making the links into divs but I'm afraid it will end up with the same result.

CodePudding user response：

You can't add a background colour to a margin value, that isn't possible. If you want it to be in the links add the following to your .nav-links class:

.nav-links {
  padding: 1rem;
  transition: .2s;
}

If you want the menu items to fill the full height of the parent element with the same effect you can do:

.nav-links {
  height: 100%;
  display: flex;
  align-items: center;
  padding: 0 1rem;
  transition: .2s;
}

I'm not quite sure I know what you wish to achieve though.