Hi @ceri,
Thank you for contacting us!
By default, the menu is set up so that clicking the parent menu item takes the user to the parent page, while clicking the arrow opens the dropdown menu.
While it is possible to make the parent menu item open the dropdown instead, doing so means mobile users won’t be able to visit the main parent page. For instance, clicking a “Services” menu item would only open the dropdown, not navigate to the “Services” page itself.
To proceed, I’d like to know:
- Do the parent menu items need to link to their own pages, or are they simply titles for the dropdown items?
- Could you please share a link to your website?
Once I inspect your site and understand your preferences for the parent links, I can provide you with the exact steps or targeted CSS code to achieve the desired behavior.
Looking forward to helping you with this!
Thread Starter
ceri
(@ceri)
Hi, thank you for your reply.
I am using the Custom Link option populated with # to create a top-level menu option, which doesn’t need to link to it’s own page.
If possible, I would like it so that when you click on “About Us” on this website on a mobile – https://www.ajholistichealth.co.uk – the dropdown menu opens up. Whereas at the moment, the dropdown only opens when you click the down arrow.
Many thanks
Hi @ceri,
Thank you for the link and the details! That is actually the perfect setup. Because you’re already using the # Custom Link, it means you can safely apply a CSS trick to expand the clickable area without breaking any page navigation.
To make the entire row (both the “About Us” text and the arrow) trigger the dropdown menu on mobile, you need to stretch the arrow’s invisible clickable container over the text.
Please navigate to Appearance > Customize > Additional CSS in your WordPress dashboard and paste the following code:
/* Mobile: Make the entire menu item clickable for dropdowns with # links */
@media (max-width: 1024px) {
.sydney-offcanvas-menu .menu-item-has-children > a[href="#"] {
pointer-events: none; /* Let clicks pass through the link */
}
.sydney-offcanvas-menu .menu-item-has-children {
position: relative;
}
.sydney-offcanvas-menu .menu-item-has-children .dropdown-symbol {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 50px; /* Adjust height to match your menu item height */
display: flex;
align-items: center;
justify-content: flex-end;
padding-right: 15px;
z-index: 1;
}
}
Please give that a try and let me know if it works for you or if you need any adjustments.
Thanks.
Thread Starter
ceri
(@ceri)
Hi, Thank you, this is great. I had to tweak the code slightly as the code you gave was dropping the arrow down onto another line. So I changed the height to 0px and gave it a top margin of -40px and it worked! Thanks!
Hi @ceri,
I’m happy to hear that you got it working! Thanks for letting us know.
Your experience is important to us, and we would love to hear your thoughts on using Sydney. Would you mind sharing a quick review? It only takes a minute and helps us continue to improve!
Here’s the link to leave a review. We appreciate your time and feedback!
Thanks.
