Active menu item jumps to two lines

Hi community,

I am having problems building my navigation menu. When a page from the dropdown is visited the text jumps below the icon. This only applies to the page you are currently visiting. For the menu items there is only a hover state filled in so I have no idea why the problem appears.

Below is an example.

Situation when no page has been visited yet.

Situation when the ‘buy litecoin’ page is open.


Does anyone have any idea how I fix this problem? All suggestions are welcome!

Without looking directly at your project, it’s difficult to give a solution, but here are some things you can try!

  1. Ensure the elements in question have the right classes applied. If there are different classes assigned to the icon and the text, inconsistencies may occur. Keep your structure simple and similar for all elements.
  2. Even though you mentioned you only filled in a hover state, Webflow automatically generates other states like “Current” for the page you are currently on. Check these auto-generated states for any inconsistencies.
  3. Look at the layout settings for your elements, such as Flexbox or Grid settings. Ensure that you’re not using any layout setting that might cause the text to jump below the icon when the page is active.

Let me know if this is helpful!