border property makes the navigation move slightly

2020-04-01 html css menu hover border

Ref the following: -

https://romantic-carson-980e19.netlify.com/

Can someone please tell me how to prevent the navigation links from moving slightly when hovering? It is to do with the border-right property but I cannot work out how to prevent it. I have tried making the border: none on hover state, I have also tried border 1 px solid transparent on both the li and the a tag. I have also tried googling but cannot find anything.

Also can you please tell me how to remove the border-right as soon as the cursor goes onto the list item (as soon as it goes red, then make the border invisible/disappear).

Ps please advise what you would have typed in google to find this solution - its probably the terminology I used when googling as it will be on there somewhere but it would be good from my own learning perspective as to what one of you guys would have typed in if you were stuck in my situation.

Thank you in advance.

Answers

Adding a border where there was none will cause the size of the element to grow by 2x (left + right, top + bottom). Your border on hover is transparent, so what's the purpose?

If you want to change the border color on hover, start with the transparent border, then simply change the border color on hover:

li a {
  border: 1px solid transparent;
}

li a:hover {
  border-color: white;
}

Alternatively, you could add the border and a negative margin to offset it, eg:

li a {
  border: 1px solid white;
  margin: -1px;
}

Related