Bootstrap navbar not same height after hover

I have a navbar with bootstrap and I’m adding hover in menu items but there’s a problem with hover effect.
When you hover menu items it shows a border-top that I’ve added during the hover effect but then the height of navbar moves a bit down.
Tried to find the problem but still haven’t found any solution for this problem, code is below.

The navbar is only just big enough to hold your menu items - there is no explicit height set.

On hovering you add a border-top of 2px which increases the size of your menu item so the navbar height increases to be just big enough to hold the now taller menu item.

This might be a little hacky but maybe you could give the menu items a transparent (or same button color) border-top when not hovered so they don’t get any taller on hovering.

1 Like

Yep that worked I was thinking to do the same, but you have any idea where was the correct issue?