Needing some help with title moving on hover

Hello, I’m having a bit of trouble with my code.
I’ve created the nav buttons on the top, but whenever you hover over them it moves the header information down. I’ve been stuck for hours trying to figure out what I’ve done wrong, and I believe it’s time to ask for help.

If anyone can point me in the right direction, I’d appreciate it.

my codepen: codepen project

This issue is related to the border-bottom: 6px solid cadetblue; in the css of #ul_nav li:hover

It may be a bit of a hack, but if you add height: 30px; to #ul_nav li and then add height: 24px; to #ul_nav li:hover, the heading will not move. You are essentially reducing the height of the li during hover by the same amount that is added by the border.

1 Like

Thank you very much for your help, that worked!