Page specific menu items on mobile doesn't work on mobile

Hi there,

It's actually quite easy to hide specific menu items on different devices.

You can use the built in classes: hide-on-mobile hide-on-tablet hide-on-desktop in menu item custom classes: https://docs.generatepress.com/article/using-the-wordpress-menu-builder/#custom-classes

Let me know if this helps.

Thanks, also useful! But my issue is slightly different (if I understand correctly). I want to hide certain items on certain pages and not hide certain items on certain devices (at the moment, but now I know how to do that!). It works on the desktop version but as soon as I switch to mobile view, the hidden menu items of a page magically reappear. Do you also have a solution for that? Super super thanks!

Hmm that sounds like a more of a plugin issue.

Can you link me to the page?

Or maybe try another plugin?

Thanks for lending a helping hand. I've written a 5-star review since you all deserve it (one of the almost 500, keep it up haha).

I've published my website that was in staging for you to take a look at:
http://www.bab4baby.nl

Would be great if you can take a look at it, probably you can see the issue right away. The issue already arises on the front page.

Thanks yet again!

Can you try adding this CSS:

.main-navigation .main-nav ul li.hide_this_item {
    display: none !important;
}

Adding CSS: https://docs.generatepress.com/article/adding-css/

Simple and clean perfect solution! Thanks for fixing something that wasn't even really your problem to begin with!

Thanks thanks thanks

Glad I could help!

Ok, one tiny follow up question. I have the same problem for the WC shop page (and only that page). Here, on mobile and desktop the full menu is shown. Is there a similar quick simple CSS solution for this? Super thanks!

Sorry so you are wanting to hide the shop page on mobile?

Nope, i would like to be able to hide some of the menu items displayed on the shop page. So the same functionality as on the other pages. I don't need a difference between mobile and other devices.
With your code everything works beautifully, except the WC shop page as it is a special page. Do you know some code for that?

Have you tried this method? https://generatepress.com/forums/topic/page-specific-menu-items-on-mobile-doesnt-work-on-mobile/#post-362190

If this doesn't work can you link me to the page again and let me know what you are trying to hide?

Thanks!

Sorry Sorry for being unclear. To work with examples:
on http://www.bab4baby.nl/babykleding I've hidden some items for ALL devices using the page specific menu items plugin. That is what I want. And this works well on every page except: bab4baby.nl/shop (the WooCommerce special archive page). Is there a way that your simple CSS solution can include the WooCOmmerce shop page? It seems that the WooCommerce shop page overwrites every functionality right now.

Thanks thanks thanks!

Strange - the shop page menu should work like any other page.

Have you checked with the developer of the plugin you're using to disable menu items? It may be a bug in their code.

Too bad that they don't respond, I think I can't move forward with this plugin for now. Thanks anyways!