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.
Thank you very much for your help, that worked!