Dropdowns Not Working/Appearing
There are cases when the navigation dropdown is not working or appearing while hovering over the menu items or when checking the website's mobile menu. There are several reasons that might cause a problem like that which we will discuss.
Menu Not Assigned Properly
Make sure that you assigned the menu correctly by going to Appearance > Menus and check the current menu which you've assigned as the primary one.
Content Scrolling Option is Enabled
Another common reason, especially when the dropdown is created in the Header Builder is if the Content Scrolling option is enabled.
On the Header Builder, if you "inspect" the Bar that contains the Navigation Dropdown element, you'll see a Content Scrolling option that you can either turn On or Off. Turning this option On causes the navigation dropdown to be invisible in the user's view.
To view this option, go to Pro > Headers and click the header that contains the navigation dropdown that has an issue. Then go to Layout then click the magnifying glass icon of the bar that contains the navigation dropdown.
Once you've clicked that, you'll see the Content Scrolling option. By default it is turned Off but there are times when it is unknowlingly or purposely turned On.
If you have a navigation dropdown, you need to turn it off.
- First, make sure you are using the latest version of the X or Pro themes. To check the version of your theme, go to X/Pro > Validation. Make sure that you update the theme following this article.
- If you are using the X theme, make sure that the Cornerstone plugin also is updated by going to the Plugins menu and check if there is an update link under the Cornerstone title. If yes, click on the update link to make sure you update the Cornerstone plugin to the latest compatible version with the X theme.
- If you're using a caching plugin, purge the cache. You may need to consult with the cache plugin documentation that you use to know how to do so.
- If you are using a Child Theme, temporarily switch to the parent theme and see if that resolves the issue. If it does, then there is an issue somewhere in the child theme, and you can investigate that further.
- Test for a plugin conflict. You can do this by deactivating all third party plugins and seeing if the problem remains. If it's fixed, you'll know a plugin caused the problem and you can narrow down which one by reactivating them one at a time. If you are using the X theme, keep the Cornerstone plugin activated.
Potential CSS Cases
- The problematic custom CSS code might be in X/Pro > Theme Options > CSS.
- The problematic custom CSS code might be in the style.css file of the Child Theme, switch the child theme to the parent theme to test if that's the case.
- The problematic custom CSS code might be in the CSS section of the page inside the content builder or the Cornerstone.
We talked about the issue of the navigation dropdown not working and the possible causes behind it. We also talked about the troubleshooting steps to find the cause. Finally, if you are still having problems, then reach out to our support team and we will be happy to assist further.
See something inaccurate? Let us know