KLEO Nav - Onclick - SeventhQueen Archived Support

This topic has 9 replies, 3 voices, and was last updated 9 years by Andrei.

Author

Tagged: Menu CSS Onclick
October 18, 2015 at 00:50 #82967

Grant
Participant

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
October 18, 2015 at 21:32 #83052

Laura
Moderator
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 🙂
October 18, 2015 at 22:24 #83056

Grant
Participant

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

October 19, 2015 at 03:52 #83074

Laura
Moderator

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 🙂

October 19, 2015 at 14:10 #83130

Grant
Participant

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

October 19, 2015 at 18:51 #83204

Laura
Moderator

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 🙂

October 19, 2015 at 22:00 #83250

Grant
Participant

Thanks Laura!

October 27, 2015 at 00:31 #84397

Andrei
Moderator

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

October 28, 2015 at 22:32 #84796

Grant
Participant

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

November 8, 2015 at 02:20 #86218

Andrei
Moderator

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