Why does my Nav bar animation background turn from pink to off white after I hover my mouse on a link?

Hi everyone,

I cloned this nav bar and customized it to my colors. Every time the mouse hovers over a link and you move the mouse away - the background doesn’t go back to pink but rather an off-white.

I’m sure there’s a setting I’m not seeing but would love help to have it go back to pink when not hovering on a link. Any help is appreciated!

Thank you!


Here is my site Read-Only: [LINK]1
(how to share your site Read-Only link)

The reason the background color of the nav bar doesn’t go back to pink when you move the mouse away is because you’re using the :hover pseudo-class to change the background color. The :hover pseudo-class only applies when the mouse is hovering over the element.

To fix this, you need to add a second selector that applies the pink background color when the mouse is not hovering over the element. You can do this by adding the :not(:hover) pseudo-class to the selector.

For example, if your CSS code for the nav bar is:

.navbar li a {
  background-color: #ffffff;
  color: #000000;
  text-decoration: none;

  &:hover {
    background-color: #ff00ff;
  }
}

You would need to change it to:

.navbar li a {
  background-color: #ffffff;
  color: #000000;
  text-decoration: none;

  &:hover {
    background-color: #ff00ff;
  }

  &:not(:hover) {
    background-color: #f0f0f0;
  }
}

This will make the background color of the nav bar pink when the mouse is not hovering over it.

Hi Diego, I just looked at your link and didn’t notice your nav bar changing. Have you fixed that or is it still heppening on your end?

Hey Timsolly! Thank you so much for this! I fixed it! But now I’m having so many issues. When I load my page, the nav bar will load first and blink before loading to the actual page… Also none of my page buttons work unless I click the nav bar once and then click out. It’s the strangest thing. I might just delete this nav bar all together, which is so sad because it looks so good!

Thank you so much for this solution! I managed to fix it. As mentioned below, now I’m having issues with the nav bar loading. When the page loads, the nav bar will load first and blink on the screen. Also you have to click and open and close the nav bar once to get the buttons to work on my page.