How to make whole nav link trigger dropdown

[ChrisDeBruyne]

Hi there

I’ve been searching around the forum and have found this very nifty function available on Pro (image below), but am wondering if there is a way to manually make the anchor trigger a sub menu dropdown with CSS or JS? I’m using regular X not Pro. The problem is when viewing the menu on mobile the dropdown area is so small that it’s easy for users to miss it and think the dropdown doesn’t work.

Any help will be greatly appreciated.

Thanks,
Chris

[lely]

Hi Chris, @ch

Try adding this custom CSS on Theme Options > Global CSS:

.x-sub-toggle {
    width: 100%;
    text-align: right;
}

.x-sub-toggle>span {
    padding-right: 10px; /*Add a little space on the right of the icon*/
}

Here’s a sample: https://screencast-o-matic.com/watch/cq1YQETdbL

Hope this helps.

[ChrisDeBruyne]

Hi @Lely

Thanks for your response. I works perfectly on a computer, however when I test it on a mobile device (which is actually where my issue was in the first place - apologies for not specifying initially) not even the dropdown arrows work.

Is there a way to make the whole row (outlined in red below) trigger the dropdown on mobile?

Thanks,
Chris

[lely]

Hi Chris,

I have check, and notice that even on desktop when browser was resize, on homepage, the dropdown arrow is not working at all. On other pages like Warranties and Portfolio it is working properly both on mobile and desktop chrome browser. It goes directly, on the product section when PRODUCT top menu is click. The issue is because of the hash link added on products. I can confirm this is a bug. As a temporary solution, please don’t add a hash link on parent menu. I will forward this to our developer for investigation. We’re sorry for the inconvenience this has caused you.

[ChrisDeBruyne]

Hi Lely

No problem, removing the hash link is enough to solve the issue in this case. Thanks for all your help.

[jade]

You’re welcome, Chris.