Mobile Menu Issue

Hi Rob,

It's because the about us and our people are actual links to a page, not like the other two with # as the link which opens the sub menu when clicked.

So do you want user to open the sub menu or linked to the actual page when they click on about us orour people on mobile?

Thanks for the response.

About Us and Our People are links to actual content but also have sub-items so ideally I guess I need it to do both. I need the user to be able to click to open the sub menu items in the accordian and then click to visit the page. Is this not possible?

You'll need to activate the dropdown arrow, so when user click on the arrow, it drops down the submenu, when user click on the menu item (text), it goes to the actual page.

You have this CSS in your child theme:

.menu-item-has-children .dropdown-menu-toggle {
    display: none;
}

You can add a media query to it, so the arrow only shows on mobile:

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

Thanks.

I have now done that.

So the user must click the arrows to see the sub-menu items on those particular top level menu items. It works but is a bit clunky since if the user clicks on SERVICES for example they get to see the sub-menu items but if they click on ABOUT US it just navigates to the page. If they use the arrows then obviously it opens the sub-menu items regardless.

Is there no way to make them all operate in the same way?

Is there no way to make them all operate in the same way?

No, you can't have both on mobile, there's no hoverstate, only click.

Ok fair enough.

Thanks for your help.

No problem :)