[Resolved] Sub-Menu Hover Width Adds 10px?

[Jeff]

Hi,

I am using Elements from the GP plugin for my Home page. On my Primary Menu I have Home, Resources, Blog, About and Contact. The Resources item has 3 sub-menu items.

Issue:
When on the Home page if I hover over the sub-menu items, the sub-menu item text changes colour based on my settings in the customizer (good), however, it also adds 10px to the right of the selected sub-menu item background (bad)?

My Primary Menu background is black and the sub-menu background is black. Under Customize->Layout->Primary Navigation, the sub-menu width is set to 200px. When I’m on my Home page and I hover over each sub-menu item, the width of that one item changes to 210px while the non-hovered items remain at 200px. My Header is set to use Primary Navigation as Header.

More Info:
This ONLY happens on my home page and not on any other pages. So if I’m on my About, Blog or Contact page and I hover over the same sub-menu items, it displays perfectly and doesn’t add the extra 10px to the background of the hovered menu item.

I tried changing my sub-menu width but no matter whether it’s 200 or 210 or 400, whatever sub-menu item I hover over, it adds 10px to right of the background for that item. I want it to stop doing that. 🙂

Any help is much appreciated!

Thanks,
Jeff

[Leo]

Hi there,

Any chance you can link us to the site in question?

You can edit the original topic and use the private URL field.

Let me know 🙂

[Jeff]

Actually I fixed it. 🙂

Found that I had:

.li {
margin: 10px;
}

for another element on the home page. Changed to:

.check-list li {
margin: 10px;
}

now I’m all good. 🙂

[Leo]

Glad you’ve figured out 🙂

[Author]

Posts