Dropdown menu buggy when browser width is between 768 and 1024 pixels

Hello ThemeGrill

I realize this bug may be a tricky one to fix… but can you reply to let me know if you are looking into it?

Thanks,
Alison

@alisontaylorbc

We will check on it in our development environment and if we find the same issue then, we will probably resolve that within theme update. So, thank you for your patience and understanding on it.

Thanks.

Hi Nitu.

Have you folks been able to duplicate this bug in your development environment?

Thanks,
Alison

Hi Nitu

It’s taken me about 12 hours to get familiar with the javascript and CSS code that controls navigation in your theme, and debug the unpredictable behaviour with the dropdowns on widths between 768 and 1024. I’ve now got a fix for it. It required changes to only the style.css file.

Would folks please review my fix and incorporate it into the theme moving forward? Then it will be safe for the multiple clients I have on this theme to do automatic updates on the theme without the menu breaking again.

HOW CAN I GET MY STYLE.CSS FILE TO YOU?

If your team does a diff between my file and the 1.4.5 style.css file, they will see all my edits. I’ve included comments with each.

I can see that the team has been trying to fix the menu between version 1.3.9 and 1.4.5. Most of the changes I made to the 1.4.5 style.css file were to roll back (comment out) additions that had been made since 1.3.9. Then, just a few other changes were required to get the menu working.

New Menu Behaviour:

To fix the menu, I got rid of the downward-pointing arrows on the 768-1024 widths, so that mobile users don’t have to try to tap those tiny arrows. Instead, I made it so they could tap the text of the menu items. (For desktop, 768-1024 widths now work the same as >1024 widths.)

Regardless of whether the parent menu item links to a page or has the custom URL of #, the dropshown displays when the parent item is tapped on a mobile device. If the user wants to visit the parent item page, they just tap it again.

I have tested that the hamburger menu works with both “Switch to new responsive menu” (in the Customize area of WP) checked and unchecked with my changes in place.

(Note: I have not tested my changes with menus that are more than 2 levels deep.)

Cheers,
Alison

Hi Nitu
Can you drop me a quick reply here letting me know you’ve seen my message above?
Thanks!
Alison

@alisontaylorbc

You can provide us your style.css file via our chat support: https://themegrill.com And if we find the fix within the changes of your’s and our’s, then, we will probably apply those within the theme update.

Thanks.

Great. I’ll send you the file on Tuesday.

For anyone who wants this fix before ThemeGrill releases an updated version with it, you can copy/paste the code below into either Appearance -> Custom CSS in WP admin or into style.css of a child theme.

/* CSS to get buggy dropdown menus working on widths 768 - 1024 px. */

@media (min-width: 768px) and (max-width: 1024px) {

  /* Don't want gap between top level menu item and its submenu.
  That causes submenu to flicker when you move over it.
  It can also cause submenu to disappear if you stop in gap too long.  */
  .main-navigation ul li ul {
    top: 100%;
    }

  /* Hide the arrows for 768 - 1024 width. We don't need them.
  And they are too hard to click because they are so small.  */
  .sub-toggle,
  .sub-menu .sub-toggle {
    display: none;
  }

  /* Restore behaviour where submenu displays if you hover over parent menu item.
  We want this now that we are getting rid of the downward arrows (carets).  */
  .main-navigation ul li:hover > ul.sub-menu {
    display: block;
  }

}