KLEO Nav – Onclick

[Grant]

Hi Guys,

Hope you are well.

I need to make the Kleo Nav Menu Tablet/Touchscreen compatible. Currently the submenu’s display on ‘hover’ which makes it very difficult to choose submenu pages. What’s the easiest way to just change the on hover to ‘OnClick’. I would think that there must be a CSS option as WordPress menu items can have CSS classes applied to them.

Many Thanks,

Grant

[Laura]

Hello, that could be done by css:

COPY CODE

ul#menu-top li:onclick {
    background-color: red;
    color: white;
}

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you 🙂

[Grant]

Hi Laura,

Thanks so much for your response. I appreciate the support.

I tried the above script you suggested but nothing changed. Just to be clear, I would like to ‘remove the hover effect from the main Nav Menu and replace it with an ‘Onclick’ action to display the submenu instead’.

Thanks so much for any input you can offer.

Cheers,

Grant

[Laura]

Hello, i see the issue is that its hard to open the submenu in a mobile device? If so, the solution would be to make the clickable area for submenu bigger

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you 🙂

[Grant]

Hi Laura,

Not in this case. The mobile menu is fine as it is. We need a solution for ‘tablets’.

If you hover over the menu on a tablet, the submenu items appear. But the moment you lift your finger to select a submenu item, they disappear again. We need them to stay viewable unless you click the menu again.

This is not a matter of making the submenu items bigger – It’s about making the menu items ‘clickable’. Please take a look at the telerik.com website as a perfect example of what we need to do to make the kleo wordpress menu ‘fully compatible’ with tablets. When you click the ‘Products’ link, the menu stays viewable even if you move the mouse away or lift your finger off the tablet screen. Click the menu item again and the submenu/mega menu retracts back again. Do you know if there is some CSS code that can do this, which can be applied to the Kleo menu?

So we need to make the Kleo menu ‘clickable’ just like this example. I hope this example helps and thanks so much for any help you can offer.

Cheers,

Grant

[Laura]

Hello, will assign the ticket to a higher support level who can help and advise you in your query.
Thanks! 🙂

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you 🙂

[Grant]

Thanks Laura!

[Andrei]

Can you please provide us a link to your site and let us know the exact tablet model you used to test this ?

Looking forward.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

[Grant]

Hi Andrei,

Thanks for getting in touch. The site link is onepeopleoneworld.org which is currently in development. I want to create a reliable nav toggle click option similar to what you can see on a site like telerik.com.

As the WordPress Menu does not by default seem to support a toggle option, you can try it with virtually any tablet – Surface, IPad, Galaxy, etc…and the menu does not ‘reliably’ stay in place when you tap a menu item. Ideally it needs to be ‘tap on’ to display, ‘tap off’ to retract.

Hope this helps,

Grant

[Andrei]

Can you please provide me a screenshot from the tablet you’re using to test this in order to properly understand how do you see the menu that doesn’t work ?

Looking forward.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

[Author]

Posts