Drop Down Menu Not Dropping Down

Hey Angella!

I’m sorry to hear there are problems with the submenus on your site.

There is one option that might help fix this issue:

I compared the “style.css” file from your site (found here) with the “style.css” from the demonstration of the Kokoro WordPress theme that you use on your website (found here). I used TextCompare’s CSS comparison tool (found here) to find the difference between the two stylesheets.

The :hover state for the dropdown menu has been removed from your theme’s “style.css” file. This CSS code determines the background and border for the dropdown menu. I think that by removing that code, the dropdown no longer works as it’s supposed to work.

Could you please try adding the following code (copied from the original Kokoro theme’s “style.css” file) after line 115 of your website’s “style.css” file?

#nav-wrapper .sub-menu a:hover {
  background: #f9f9f9;
  color: #000;
}

The “mini window” does not show on my computer. I think that adding the code should fix the “mini window” pop up based on how you described the way it works.

Hope this helps! If you need any more help, please let me know.

p.s. Your site looks great!

Hi there,

That didn’t seem to work. Plus, I noticed that code you asked me to enter was already in my CSS on line 428.

Any other ideas? ??

Thanks for the suggestion though.

You’re welcome!

Sorry, I only copied the menu code and not the rest of the styles, so the line numbers were different. And that code is only for when the mouse hovers over the sub-menu items! I’ve no idea what I was thinking lol.

I looked at it again. The responsive code from the “style.css” was removed. I would suggest adding that code back to your “style.css” file, as it controls some of the mobile functionality of your site. It also controls the dropdown menus.

You can find the code from line 2319 to line 2651 (I double-checked this time!) of the original theme’s “style.css” file: https://demo.zthemes.net/kokoro/wp-content/themes/zkokoro/style.css. It’s labelled “16. RESPONSIVE.” Copy the code to line 1655 of your “style.css” file.

As you wanted to modify the CSS code, I’d suggest copy/pasting whatever code you’d like to modify into the “Appearance > Customize > Additional CSS” section of the WordPress admin instead of editing the “style.css” file. Then modify the “Additional CSS” code instead.

That way, if you update your “style.css” to a newer version from ZThemes, you won’t need to redo the changes that you made to the CSS code. And the site shouldn’t break in case something necessary was removed.

I added the responsive code into my browser to test it, and the drodown menus are now working:

Please add the code to your site and let me know if it works.

• This reply was modified 4 years, 6 months ago by Niall Madhoo.
• This reply was modified 4 years, 6 months ago by Niall Madhoo.

Hi Niall,

Now that you mention it, I think I accidently deleted the RESPONSIVE code when I was trying to clean up the WooCommerce junk that was not removed when I uninstalled it (it shows up after WooCommerce code).

After my last response, I had went back into the demo CSS and copy/pasted the entire thing into my own CSS! I think it fixed my menu drop down. But hard for me to tell because my Safari browser shows it’s still broken while my Chrome shows it works (I purged all caches and cleared history on both).

Could you verify for me?

Thank you so much! ??

Hi Angella,

You’re welcome! ??

It’s working for me on Safari 13.1.2. It wouldn’t work on the home page at first. I opened the blog page and the dropdowns worked. I went back to the home page and the dropdowns magically started working there too.

Have a great week!
Niall

Hi,

I am having the same issue on one of my sites. Can you also take a look?
FirstNano.com