-
AuthorPosts
-
April 16, 2018 at 3:40 am #942387
Hi,
On this website that uses the enfold theme:
http://www.meditationinsarasota.org the main menu items are not clickable (but if you hover over them you get a drop down menu). So I set a custom link to “##” for the top level items. Is there any way I can make it so that when the user hovers over the top menu items it doesn’t look like a clickable link (the mouse icon turns to a hand to make it look like a clickable link – this confuses users). I want these top items as unclickable static items.
I wonder if you can help with this?
Best wishes & thanks in advance,
Chris Skelton.April 16, 2018 at 5:52 am #942426Hey kelsangchodor,
Please try the following in Quick CSS under Enfold->General Styling:
nav.main_menu li > a { pointer-events:none; } nav.main_menu #menu-item-3286 a { pointer-events:auto; }
Best regards,
RikardApril 16, 2018 at 6:06 am #942429Hi Rikard,
Thanks for your reply,
I copied that code into the General Styling but it didn’t work.
Any other ideas? I tried adding !important – but still not working.
Thanks for any help,
Chris SkeltonApril 16, 2018 at 5:31 pm #942671Hi,
Try this:
nav.main_menu li > a { pointer-events:none; cursor: default } nav.main_menu #menu-item-3286 a { pointer-events:auto; cursor: default }
Best regards,
Jordan ShannonApril 16, 2018 at 9:15 pm #942761Hi Jordan,
This works BUT – all the items underneath these main menu headings remain as the normal mouse pointer icon (as opposed to a clickable hand icon).So, all the menu items underneath the main heading take on the same characteristic of not showing a clickable hand icon (when of course they all clickable underneath the main heading)
Any ideas?
Thanks for your help – really appreciated,
Best wishes,
Chris.April 16, 2018 at 9:30 pm #942767Hi,
Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child theme’s style.css file:
.av-main-nav li.menu-item-has-children a { cursor: default; }
Best regards,
YigitApril 16, 2018 at 9:57 pm #942777Hi Yigit,
No, it still isn’t working. Just to confirm this is the code I have below (using menu-item ID = 4189) – being the “About Us” drop down. I’m trying to get it so that “About Us” does not seem clickable (i.e. normal mouse pointer) but everything underneath appears normal and clickable (hand pointer icon):
Here’s the webpage: http://www.meditationinsarasota.org
.av-main-nav li.menu-item-has-children a {
cursor: default;
}nav.main_menu li > a {
pointer-events:none;
cursor: default
}nav.main_menu #menu-item-4189 a {
pointer-events:auto;
cursor: default
}April 18, 2018 at 5:44 pm #943691Hi,
Please use only following code
.av-main-nav li.menu-item-has-children a { cursor: default; }
Best regards,
YigitApril 18, 2018 at 6:32 pm #943713Hi Yigit,
Thanks so much – OK, the main menu navigation items do not look clickable now – which is great.
However, now all the items underneath these menu headings (when you hover over them) do not display the clickable icon (the icon of a hand) even though of course they are all clickable,
Best wishes & thanks for your help,
Chris.April 18, 2018 at 6:36 pm #943717Hi,
Add the following as well:
ul.sub-menu a{ cursor: pointer!important; }
Best regards,
Jordan ShannonApril 18, 2018 at 6:37 pm #943718Hi Chris,
My bad. Please change the code to following one
.av-main-nav li.menu-item-has-children > a { cursor: default; }
Regards,
YigitApril 18, 2018 at 8:58 pm #943762This all seems to be working now!!!
Thanks so much for all your help guys!
Perfect.
Have a great day!
Best wishes,
Chris.- This reply was modified 6 years, 7 months ago by kelsangchodor.
-
AuthorPosts
- The topic ‘How to stop top menu items looking "clickable"’ is closed to new replies.