I need to set up my website so that my top-level menu does not go to any page – it is strictly a placeholder for the submenus under it. I have been trying to follow the thread at https://kriesi.at/support/topic/how-to-stop-top-menu-items-looking-clickable/ and so far have it set up with the following:
———————
}
.av-main-nav li.menu-item-has-children > a {
cursor: default;
}
ul.sub-menu a{
cursor: pointer!important;
}
—————————-
The above code is in the Enfold Theme Options CSS. It successfully does change the top menu item from having the clickable hand icon on hover – but it does not stop the user from clicking the top menu item and being taken to a page. This is the part that I don’t want to have happen I want where the top menu item does not link to anything and the user has to click one of the submenu items.
I don’t know anything about CSS except how to cut-and-paste stuff into it. What am I missing?
Thanks!
Robert
PS: Site info in private content.
Hey Chiefi,
Thanks for the login, I adjusted your css to this:
.av-main-nav li.menu-item-has-children > a {
cursor: default;
}
.av-main-nav li.menu-item-has-children > a:hover {
pointer-events:none;
}
.av-main-nav li.menu-item-has-children > a:active {
pointer-events:none;
}
ul.sub-menu a{
cursor: pointer!important;
}
and it seems to work correctly, but ultimately the best solution would have been using custom menu items with no link for the top level items, but since your menu is already created this should work for you.
Please clear your browser cache and check.
Best regards,
Mike