Buttons resizing on hover transition


I’m trying to figure out what to do in order to prevent the bold on hover transition I’ve implemented on my navigation buttons from nudging the other navigation buttons slightly.

In other words, when hovering over the ‘ABOUT’ nav-button, the ‘PROFESSIONALS’ and ‘SERVICES’ buttons are nudged to the left.

Is there any way I can resolve this?

Here is my site Read-Only: https://preview.webflow.com/preview/aaaa-725095?preview=4464440bbfa7094d82d5933ac24a85b8

Thank you in advance for your kind help!

Right now, the class ‘Button’ has no width assigned to it, so when the text is bold on hover it becomes wider.

You could try giving the class ‘Button’ a width so each of the buttons are the same size, or create a sub-class for each of the buttons and give them each an individual width.

Hope this makes sense!