Nav links moving on hover

HTML & CSS
1

Helllo I am working on this site at https://wordpress-310558-1682927.cloudwaysapps.com/

There is a dropdown on the big red button called Phetch! Home Delivery or Pickup on the top right.

When I hover over the sublinks in the dropdown the link shifts to the left.

I can’t seem to figure out whats causing that in the CSS

Any ideas?

Thanks!

2

It has to be a CSS issue look at the classes applied in the Our Stores drop-down because that seems to be OK, its probably a padding or margin setting error on hover for that item

3

The drop-down shifts simply because the width of the content changes. The widest line in the drop-down, plus padding left and right, determines the width of the drop-down. When the line of characters is less, the drop-down narrows. In other words, the drop-down is not a fixed dimension. The right side of the drop-down will vary depending on the number of characters of the widest line.

To see this clearly, just make the drop-down of only 5 characters on each line and you’ll see it get very narrow. You might make one line wrap and see what effect it has on the drop-down, whether it breaks it or not.

4

You are changing the padding of the anchors on hover which is making them different from the default. If you remove the padding property value from your hover rule then it will be ok. If you don’t know where it is then just add this custom css instead.

#_nav_menu-61-3603 ul li#menu-item-1562 ul.sub-menu li a:hover {
padding:10px 20px;
}
5

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