Navbar background-color Width Problem

Hello all,

I am working on navbars now.

My problem: I want my background color to cover all the height of the navbar when on hover state. But it only covers a specific area and not full width of list item and height of the navbar.

How can i solve this? What is my mistake?

You can check my code here → https://codepen.io/BGB37/pen/xxppMjv?editors=1100

I’m not sure if you can change the hover state of a non-link element. I’m not a professional, maybe it’s possible.

Adjust the padding of your link such that the anchor’s height becomes equal to that of the navbar. When you set the padding, use relative sizing, not absolute units. That way every time the nav bar resizes, the anchor(along with its padding) will also resize relatively to cover the entire height of the navbar.

So then when you hover, the anchor ( inclusive of its entire padding which now spans the entire navbar height ) will get highlighted.

Yes, that was it! Thank you for your help @skamat .

1 Like

This is helpful for me, as well. Thanks!

1 Like

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.