Menu categories on dropdown hover moves sporadically

When I hover over my menu categories (on mobile only), it moves around the other categories, causing them to look crazy and sporadic. Any advice on how to fix this?

Thank you!
Emma


Here is my public share link: http://commonbond-sia.co/
(how to access public share link)

Hi @emmachaoluk

Thanks for posting on the Forums!

It looks like you have some differences in padding from your normal state to your hover state. You can hold ALT and click the blue to set this padding back to default.

It also looks like there is a difference in size of your border on hover. This will cause the navlinks to “jump” as this adds extra height every time you hover.

Your current normal state:

Hover state:

I recommend setting your normal state to a border of 2px as well and set the color to transparent. Then when you hover it won’t jump, but simply change colors.

Here is a GIF illustrating all these steps.

One other thing to note here is that hover states typically aren’t seen on mobile devices. The only ones that can see the hover state’s on mobile will be those designers/developers checking out your site on emulators or in the inspector :slight_smile:

That said it’s still good to make the hover state’s work properly :smiley:

Hope this helps! :slight_smile:

Hi Brando,

Thanks for your help on this! This was the last piece of the puzzle and now my website is all set.

I appreciate it!

Emma

1 Like

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.