nav link jumps on hover

[Jamie]

Hello all. I am putting together a responsive page. I have a typical horizontal nav at the top of the page. On the active link as well as hover, I want to have a 1px border around the nav item that is spread out using 8px of padding. This of course makes the link move when you hover over the list item because the padding makes it move. So right now, each item will move 8 pixels to the left when you hover over each nav item. I tried using relative and absolute positioning so that it wouldn’t move but I can’t make it work. Any ideas?

[Beverleyh]

Your description isn’t really clear but try putting the border on the link’s normal state but make the border-color transparent. This will make the border always present but only visible when hovered, and the true border-colour kicks in.

If you need any more help, please provide a reduced demo in CodePen that shows the problem you’re having.

[Author]

Posts