[Support request] Disable link to parent menu item on mobile

[Lara]

Hi there,

I have run into a problem with the mobile menu. I have enabled the collapsing of the subcategories on hover. Right now it looks like this:

Parent
Child 1
Child 2
Child 3

The navigation works fine on desktop. When I hover over “Parent”, the sub-categories “child 1”, “child 2”, etc. are displayed, and clicking on “Parent” sends me to the parent page. However, the subcategories are not displayed when I am on the mobile menu. When I click on “Parent” on the mobile menu, I get send directly to the “Parent” page. I would like to disable the click on the parent page only on mobile, and instead show the sub-categories “Child 1”, “Child 2”, etc. when I am on mobile. Is this possible?

What might be important to note: I have removed the drop down arrows from the navigation.

Thank you!

[Tom]

Hi there,

Couple options.

1. Make the parent item a custom link with # as the URL: https://generatepress.com/knowledgebase/using-menus/#create-drop-down-menu-custom
2. Go to “Customize > Layout > Primary Navigation” and set the “Dropdown type” to “Click – Menu item”.

Hope this helps 🙂

[Lara]

Thank you for the very speedy reply Tom! These would be great solutions, but what I failed to write in my first post is that I would like the parent page to be clickable on desktop (since it is its own page with its own content), just not on mobile. So the two options unfortunately do not really work in this case. The problem that I have is that I have removed the drop down arrows (I like the look better like that), and now when I click on the parent page on mobile it doesn’t show the sub-pages and instead goes directly to the parent page. This is why I’d like to disable the link to the parent page only on mobile, but still keep it on desktop. Is this even possible?

[Tom]

Hmm definitely not easy I’m afraid.

Why not show the dropdown arrows only on mobile?

This plugin might do what you need, not sure: https://wordpress.org/plugins/generate-legacy-mobile-menu/

[Lara]

Using dropdown arrows only on mobile is a good alternative, thank you for suggesting that! I have now done that and am trying to make the dropdown arrows extend the width of the area (because right now you have to click precisely on the arrow to get the submenus to collapse). This code has helped:

.main-navigation ul li .dropdown-menu-toggle {
    width: 60%;
    text-align: left;
}

Now I was asking myself if it might be possible to have the dropdown arrows extend the whole width (which would of course indirectly disable clicking on the parent page). But I’m guessing that this isn’t possible?

[Lara]

Or is it maybe possible to have the dropdown arrows next to name of the menu items, instead of the arrows being all the way to the right? The CSS code that I have posted above does move the arrows more to the left but it looks kind of weird the way they are all aligned under each other. I think it would look better if they came right next to the name of the menu item (with a space in between of course. Is it possible to link the arrows to the page names in the menu?

[Leo]

Hello,

Looks like the default value for the dropdown arrow is at 10px to the right of the menu item. This CSS below should reduce the space by half. You can adjust the px number to bring them even closer if you wish.

.menu-item-has-children .dropdown-menu-toggle {
    padding-left: 5px;
}

Let me know if it works 🙂

[Tom]

This will make them sit next to the words:

@media (max-width: 768px) {
    .menu-item-has-children .dropdown-menu-toggle {
        float: none;
    }
}

[Author]

Posts