mega menu styles overriding theme widget styles

Hi akallen,

There is a body class of ‘mega-menu-primary’. To apply custom styling to items within the menu only, try this selector instead:

#mega-menu-wrap-primary a

Regards,
Tom

Hi Tom,

Thanks for your reply. The custom styling allows you to change styles but not selectors. The body class is added in megamenu.php. I’m afraid to change it there from ‘mega-menu-‘ to ‘mega-menu-wrap-‘. Am I missing something?

I did make the change to the body class in megamenu.php and it worked. I guess I’ll have to remember to do it again after an upgrade.

Hi akallen40,

You shouldn’t need to change the megamenu.php file.

Can you undo that change, then, going back to step 1, explain what you are trying to do? E.g. are you trying to change the way links are displayed in the menu without affecting the rest of the page?

Regards,
Tom

Hi Tom,

I removed the change from megamenu.php. The menu works well but the styles are being applied to the whole page because of the body class .mega-menu-primary. The only way to change the body class to .mega-menu-primary-wrap is to do it in megamenu.php. So I don’t want the menu styles to be applied to the entire body. Is there a way to change the body class without changing the code?

Thanks,
akallen40

Hi akallen40,

Ok, if your custom CSS looks like this at the moment:

.mega-menu-primary a {
   color: red;
}

Try simply changing it to:

#mega-menu-wrap-primary a {
   color: red;
}

(without making any other changes, as the “mega-menu-wrap-primary” ID already exists on the menu element)

Regards,
Tom

Hi Tom,

I tried that but the links further down the page were still inheriting .mega-menu-primary because the body class style is still applied. When I decreased the screen size to mobile, the links in the service boxes were too large. I changed the body class in the code and it worked.

Thanks,
akallen40

Ok, glad to hear you got it working.

Regards,
Tom