[Resolved] Slideout menu overiding my css

[Matt]

Hello,
I have set certain menu items to appear on certain pages. I’ve done this by setting css of the individual menu-items to display:none on some elements, depending what page I’m on.

This works fine on the primary menu, but the when slideout menu is triggered, the display:block on the slideout-menu class in GPs css overrides the css on the individual elements who inherit the display:block from the slideout-menu.
I could go an start messing around with the GPs css, but I don’t want to screw up the slideout menu.

I set some javascript to reset the css to diplay:none when the hamburger icon was pressed, but it didn’t make any difference. I guess that it might have triggered too early.

Can you suggest a way round it?

Matt

[David]

Hi there

the issue is the Slideout Navigation doesn’t add #ID to the menu item. Instead it adds it as a class. So you could use the class instead .menu-item-1180

How many variables are you dealing with regarding menus being hidden for different pages? May have an alternative solution.

[Matt]

Well that was easily solved. No problem now!
I never noticed that the elements on the slideout were classes but the on the primary menu were ids.

Thank you David

[David]

You’re welcome 🙂

[Author]

Posts