Whole website moves 1 pixel when I hover over a nav link with a 1 pixel border hover style

Site URL: https://grey-armadillo-bdg7.squarespace.com/

Hi Everyone - 

I added a custom hover style to my desktop navigation that I really like. It includes a single pixel bottom border. The problem is there is a very slight movement, I'm assuming a movement of 1 pixel, of the rest of the navigation links and the rest of the page when the user hovers on and off each nav link so it's very distracting. I understand, in theory, why everything is getting pushed down 1 pixel because I added a 1 pixel border, but I haven't figured out how to fix it. The website is not live yet so I took a video of the effect to show you what I mean. See attached video file. Any tips would be greatly appreciated.

Thank you,

Christina

nav-video-for-circle-062221.mov

Please post the URL for your site.

If your site is not public please set up a site-wide password, if you've not already done so.

Post the password here.

Adding a site-wide password is not a security breach. Please read the documentation at the link provided to understand how it works.

We can then take a look at your issue.

site url: https://grey-armadillo-bdg7.squarespace.com/

password: balch!

Add the following to Design > Custom CSS.

a.Header-nav-item {

  border-bottom : 1px solid transparent;
  
  }

This is for v7.0 using the Brine template family.

Let us know how it goes.

thanks @creedon works great!