Puzzled by hover color change in a nav bar

HTML-CSS
1

So I’m trying to get my nav bar sorted. I wanted a background change on the links when hovered over. I’ve kinda got it working with messing around with the <a> padding. Before I set the padding the color would only change the background directly behind the text of the link so it was too small. Is there a more efficient way of getting this to work?

https://codepen.io/t-lyons/pen/pOwVwx?editors=1100

2

First of all, when you put the <a> in your question - or for any inline code - surround it with a single backtick on each side so it doesn’t get interpreted. I did it for you.

Secondly, what you did looks normal. How is it inefficient? It’s one line, right?

3

Hi @t-lyons

  1. Remove the width of 60vw from the #logo
  2. Remove the width of 40vw from the #links
  3. Give your #container a 100% width

After these three steps, add justify-content: space-between to your #container

OR

Give your #logo less vw like 40vw and #links a 60vw, currently the logo container occupies too much space than required, but the links are not getting enough space.

Now try hovering your anchor elements, you will see the difference when you do these.

4

Thank you Kevin. I knew the way I asked the question probably wasn’t the right way to do it, so thanks for showing me the backtick trick.