Ask coding questions

← Back to all posts
Need help to fix hover effect on footer navigation bar
skr75 (0)

I have a navigation bar at the top of the page and the same navigation bar is repeated at the footer. The CSS style is the same for both. Only difference between the top navigation and footer navigation is that the footer has an extra paragraph element with copyright info. I am using a pseudo selector (:hover) to show a background color when the navigation links are hovered. When the links are hovered in the top navigation the hover effect hovers the entire navigation bar, but in the footer navigation, the hover effect hovers only the links but not the whole navigation element. I am not able to figure out why because I have used the same style for both separated by a comma as selector. If someone can help with this, that will of great help. Sharing the link to my repl below.

skr75 (0)
skr75 (0)

@InvisibleOne Thanks for your reply. Did you mean height: auto; or height: 100%? I tried both on the copyright element and it does not help. Or you mean font size? I checked the font size of both and both are same font size.

InvisibleOne (2674)

try changing your copywrite text to the same height as the nav items