Logo on my navbar

HTML-CSS
1

Ive followed the amazing free code camp tutorial of making a nav bar and have just practiced it like 10 times. The only thing im not sure of is that the logo hovers with the rest of the parts of the nav bar and im not sure how to make only the logo not hover.

Link to the example:
https://codepen.io/NinaLoeterman/pen/aedjqg

Would love suggestions!

2

When you say “logo” you mean your name? You don’t want it to have the hover: state?
-J

3

@NinaLoeterman, please let me know if I am following you. You want to remove the background (#d9e6f2) if the pointer hovers the logo, right? if so, I would do this, not sure if it is the more elegant way but it works :stuck_out_tongue:

#logo:hover {
  background-color: transparent;
}

asd

2 Likes
4

You have your logo set as an anchor tag <a>, so it uses the same styling as the other anchors from your nav a and nav a:hover selectors.
One way to stop the hover effect, if it does not have to be an anchor, is to change it into a <p> tag, and then add p to the nav a selector: nav a, p to give it the main styles but not take the hover.

If it has to be an anchor, then @leovago has given a suitable solution.

1 Like
5

You can fix it by doing one of the following.

This will make the first child from the list of #navbar transparent
nav a:hover:first-child { background-color:rgba(0,0,0,0); }

Another way is to specifically target that logo id
a#logo:hover { background-color:rgba(0,0,0,0); }

6

Make the hover selector more specific to the nav links. I would add a class to the links and target them (something like .nav-link:hover).

Or you can just target any <a> element with a href attribute in the nav.

nav a[href]:hover {
  background-color: #d9e6f2;
}
7

Thank you all for your answers! I ended up doing:

#logo:hover { background-color: transparent; }

and I get the result I wanted:)

8

I would not suggest using that CSS. It may seem like a simple solution to your problem, but it’s not the right solution. The right solution is to target the elements you want the hover on, simple as that.

What you are basically doing is creating a problem that isn’t there which you then need a solution for. The real solution, however, is not to create the problem, to begin with.

1 Like