I was asked a question about how to disable the hover effect when you disable a parent link in the WordPress menu. I wrote a blog post on how to Remove the parent menu link previously and if you want to learn how to do that just click on the link to see the steps required to achieve that. In this blog post, I will show you how to remove the hover effect when there is no actual link on a particular menu item. This is based on the WordPress 2015 template that comes with the default install of WordPress and may be different on other themes.
Find the menu-item number
The first things you will need to do is get the number of the menu item using the developer tools that come with the particular browser you are using. I use Chrome so the images are from the developer tools supplied by Chrome. Firstly right click the element you want to disable the hover effect on and select the “Inspect” menu option as per the diagram below.
Select the inspect menu option to display the hierarchy of all the elements on the page.
The information now required will be the menu-item number and this case the number is 5. We will use that number to insert into the CSS to disable the hover effect on menu items that have no actual link.
Insert the CSS
Below is the code we will insert into the style.css file:
.nav-menu li#menu-item-5:hover > a
{
color: inherit;
}
Install Simple Custom CSS plugin
If your menu item number is ten then replace the number 5 above with your number. When making changes to a template, it is good practice to make a child theme of the original. The reason behind this is if there is an update to the main theme the changes you make will be overwritten, and you will lose your changes. However to create a child theme for two lines of code seems a bit of an overkill. However if you do have a child theme insert the code above into the style.css of the child theme. Another option you could use is to install a plugin called Simple Custom CSS, and when the theme is updated, you will not lose the changes you have made. Once you have installed and activated the plugin click on the Appearance menu item and select the Custom CSS menu option.
Once the Custom CSS page has opened a text field will be displayed as per the image below.
Copy and paste the CSS into the text field on the page and click on the Update Custom CSS button and the CSS should disable the hover effect on the menu item.
Once again do not forget to change the item number that is your number.
