How disable the click on menu items

Hello Team,

Hope you all doing well.

My website is https://traveltourismacademy.com/, in the menu of Courses, there is another sub menu which is Diploma Courses. I want my customer to navigate to Courses ---->Diploma Courses ----> and then choose a course.

Few customers are landing on Courses and few are on Diploma Courses.

Appreciate a way out so that my customer will not be able to click on these menu items.

Regards,
Anil

Hi,

You can disable the Courses and Diploma Courses menu links with this Custom CSS:

#mainnav ul li.menu-item-932 a {
    pointer-events: none !important;
}

#mainnav ul ul li.menu-item-293 a {
    pointer-events: none !important;
}

Please add the above CSS to your Child Theme’s style.css or in case you haven’t setup a Child Theme already, then you can also add the CSS to wp-admin -> Appearance -> Customizer -> Additional CSS so you won’t loose the changes after Theme or WordPress updates.

Please let me know how it works.

Kind Regards,
Csaba

Hi Charlie,

Thank you for your quick support.

After using the CSS code provided. The complete Courses along with all the menu items under Diploma Courses are also disable to click.

However, what I need is only Courses and Sub Menu of Courses which are Diploma Courses, Certification Courses and Short Term Courses to be non clickable. Alongside the menu items under Diploma Courses, Certification courses and short term courses should be clickable such as Advance Diploma in World Travel & Tourism Management etc.

Thanks & Regards,
Anil

Hi,

Ok, I see you have resolved it by linking those menu items to # which is also a good solution, or do you still need CSS solution, so you don’t have to link your menu items to #? Please let me know.

Kind Regards,
Csaba

Hi Charlie,

Hope you have understood my requirement. I will be glad if you provide the CSS.

Regards,
Anil

Hi,

Ok, you can disable the Courses menu item and the 3 sub-menu items below it, but still enable the other sub-sub-menu items with this Custom CSS:

#mainnav ul li.menu-item-3609 a {
    pointer-events: none !important;
}

#mainnav ul ul li.menu-item-3610 a {
    pointer-events: none !important;
}

#mainnav ul ul li.menu-item-3611 a {
    pointer-events: none !important;
}

#mainnav ul ul li.menu-item-3612 a {
    pointer-events: none !important;
}

#mainnav ul ul li.menu-item-3610 ul li a {
    pointer-events: all !important;
}

#mainnav ul ul li.menu-item-3611 ul li a {
    pointer-events: all !important;
}

#mainnav ul ul li.menu-item-3612 ul li a {
    pointer-events: all !important;
}

Please let me know how it works.

Kind Regards,
Csaba

Hello,

I have the same question regarding our site as was originally asked on this post. I wasn’t sure if the solution given above would work for our site, so I thought I was ask for help as well. On our site (http://www.asset-usa.org) under the Members menu, I would like “Member Materials” on the main drop down menu disabled from being a clickable link. All of the items on the sub-menu, including “Member Materials” on the sub-menu need to remain active. Thank you.

Hi,

If you want only Members ( the main menu item ) not clickable, then I suggest to simply link that to # in wp-admin -> Appearance -> Menus, use Custom Link to add a link with title “Members” and link set to #.

Kind Regards,
Csaba

This does the trick. Thank you!

Brian

Hi,

Great! You’re most welcome! If you need help with anything else, please open a new topic.

Have a nice day!

Kind Regards,
Csaba