Jumping top navigational points

Hi all squarespacers, 

I have an issue with my top menu bar, it jumps when you hover over it. 

I have added some custom CSS to create the underlined color effect but I don't know how to solve this jumping thing. 

https://www.cecilliehanssen.com

Thank you. 

If you add the underline effect before hover (exactly the same but transparent instead of coral) you won't get the jumping.

Hi @Ziggy

Would you mind taking a look at where I go wrong? - I tried the following without luck:

.header-nav-list :hover {
    text-decoration: none;
    box-shadow: inset 0 -1em 0
    rgba(0,0,0,0);
    color: inherit;
      padding-left: 3px !important;
}

.header-nav-list :hover {
    text-decoration: none;
    box-shadow: inset 0 -1em 0 rgba(249,130,147,1);
    color: inherit;
      padding-left: 3px !important;
}
 

Thank you 🙌

You currently have two hover states, try removing the hover from the first:

.header-nav-list {
    text-decoration: none;
    box-shadow: inset 0 -1em 0 rgba(0,0,0,0);
    color: inherit;
    padding-left: 3px !important;
}
.header-nav-list:hover {
    text-decoration: none;
    box-shadow: inset 0 -1em 0 rgba(249,130,147,1);
    color: inherit;
    padding-left: 3px !important;
}