hover on menu animation changes height of header / menu bar

.navigation-search input[type="search"], 
.navigation-search input[type="search"]:active,
.navigation-search input[type="search"]:focus {
    color: #000;
    background-color: #fff;
}

.main-navigation li a:after,
.secondary-navigation li a:after {
    opacity: 0;
    transition: opacity 500ms ease-in-out;
    content: "";
}

.main-navigation .main-nav ul li[class*="current-menu-"] > a:after, 
.main-navigation .main-nav ul li:hover > a:after, 
.main-navigation .main-nav ul li.sfHover:hover > a:after,
.secondary-navigation .main-nav ul li[class*="current-menu-"] > a:after, 
.secondary-navigation .main-nav ul li:hover > a:after, 
.secondary-navigation .main-nav ul li.sfHover:hover > a:after {
    content: "";
    display: block;
    width: 100%;
    border-bottom: 2px solid #A13643;
    position: relative;
    top: -20px;
    opacity: 1;
}

I've add this css a long time ago. It is a way of adding the red underline on the hover menu.
Now i see that when i hover (see project page) the menu has a little jump on the image bellow.
I'm thinking this happens because on hover, the menu needs a bit more space to render that line. (? maybe)

The problem is i've added more space to the height and it does not fix my problem.
I have 72px on menu item height in primary nav and on sticky, also the header padding is zero.
Any ideas how i can control that underline on hover, to not mess with the primary menu height?
ty