How To Have A Menu Border On Hover Without Movement Using The Menu Element

22/07/2020

When creating a menu using the Menu Element, you can set a border on hover, as I have done in the image below. But if you just set it on hover, you will see the menu move slightly, as the border is activated. To eliminate this movement when you hover, there’s a simple trick.

Menu Border - No Movement on Hover

If you start by adding a border size and color on the Hover state of the menu, as found on the bottom of the Main tab, under the Main Menu Item Styling, you will see the menu moves slightly on hover, as the border is activated. In the image below, I have added a 5px border to the bottom of the menu.

Menu Border - Hover State

The key to eliminate that movement is to also set the Regular state with the same size border, and then set the color to transparent. That way the border is also on the Regular state, but it’s just invisible. But with this method, any movement is fully eliminated.

Menu Border - Regular State