Question

Submenu not displaying (and arrow also not showing) on mobile view

  • 5 July 2021
  • 8 replies
  • 2163 views

Badge +1

Hi there, I am at the end of my wits with this problem.

Please see my test environment. https://orca.marisasteyn.co.za/ 
The menu displays 100% fine on Desktop, the submenu arrows and the dropdown are displaying. However, when I check on mobile view (inspect and also on my physical phone) there are no arrows on the submenu and the dropdown doesn’t display.

I have done the following

  • removed all my custom CSS
  • disabled all the plugins
  • created a brand new menu from Appearance > Menus
  • created a new header with the new menu

Nothing seems to bring back the submenu and arrows on mobile.

I know this used to work when I first started creating the site at some point it stopped working hence the steps I’ve taken above.

If anyone has some advice it would be much appreciated :pray:  


8 replies

Hi Maria,

 

I am having a similar problem to you. This is the answer I got from Elementors technical dept:

 

switch your theme (temporarily) and see if it makes any difference.

Please also regenerate the CSS via Elementor > Tools > Regenerate CSS on your WordPress Dashboard, then make sure that you clear:
<ul><li>your WP cache (your WP plugin if you have one),</li><li>your server cache (if you have one. In this case, you can contact your hosting provider),</li><li>and your browser cache.</li></ul>

Let us know if you figure out the  solution to the problem :)
 

Userlevel 3
Badge +3

@MarisaGRRSteyn  

I just visited your testing environment on my iPhone and I saw the menu complete with the arrows and submenus. Therefore, I am thinking you solved the issue. If you need further assistance please feel free to reply.

 

I’m having this same problem with sub-menu arrows not appearing and it’s driving me crazy.

I’ve done every suggestion I can find including:

  • changing the overflow CSS property from default to hidden and back
  • changed z-index to 999 (not that that should be the problem)
  • switching them from Ocean to Hello and back
  • regenerated the CSS via Elementor > Tools 

I’ve created a page with just a menu template and when I’m in the Elementor editor, the menu functions like it should with the chevron dropdown...but when I “Preview” it or take it live, the drop down isn’t there.

Obviously, I continue to flush all caches each time I change something.

Here’s the test page I’m working on : https://bjosephburch.com/menu-test/ : but the problem is site-wide...including a different menu in my footer.

It doesn’t work on desktop Chrome, Safari, nor mobile.

I have Elementor Pro.

Any advice?

Merci,

Bernard

P.S. I have not tried to disable all plugins—please don’t make me do it—because I’m assuming it’s an Elementor problem, as it was working BEFORE.

Hello,

I am having the same problem with submenus not showing on live site but they show in customizer and work well.  This have to be a Elementor problem since i did the update to Elementor.  I have attached files to show menus in customizer working.  Here is my website url https://valleygreenwebdesign.com

I did try switching themes and regenerating CSS files.

Any advice?

Thanks,

Dennis

Hello,

I am having the same problem with submenus not showing on live site but they show in customizer and work well.  This have to be a Elementor problem since i did the update to Elementor.  I have attached files to show menus in customizer working.  Here is my website url https://valleygreenwebdesign.com

I did try switching themes and regenerating CSS files.

Any advice?

Thanks,

Dennis

Seams that you have solve the problem. Any advice? We have the same problem!

I had a similar problem and solved it based on Paulpat’s suggestions so I will share it here.

My actual problem was that after adding a new page to my site and adding it as a menu item, the new menu item showed up fine on desktop and even on mobile it showed up fine when I expanded the menu on the home page and on certain other pages, but there were many pages on mobile from where this newly added menu item didn’t appear when the same menu was expanded.

To specify how I added my new item (because the problem may be related to the way I did it): I went to Wp-admin/Appearance/Customize which opened Astra’s ‘active theme’. Here I expanded Menus/Primary. In the bottom I clicked Add Items and chose my newly created page as item. Finally I moved the new item to the submenu where it belonged. So this is how I added the menu and then I couldn’t see this change on mobile when expanding the submenu from certain pages (while it appeared fine when expanding from other pages).

I tried to clear my mobile browser’s cache but it didn’t work.

Of course, the culprit turned out to be the WP cache. After researching I noticed that I had indeed a caching plugin installed that is listed on the left side menu in my wp-admin towards the bottom. It’s called LiteSpeed Cache.

 

Solution:

I clicked ‘Purge All’ under the expandable lightning icon on the top of WP-admin that turned out to belong to LiteSpeed Cache plugin. After that, my new menu item showed up fine on every platform from every page.

I’m having this same problem with sub-menu arrows not appearing and it’s driving me crazy.

I’ve done every suggestion I can find including:

  • changing the overflow CSS property from default to hidden and back
  • changed z-index to 999 (not that that should be the problem)
  • switching them from Ocean to Hello and back
  • regenerated the CSS via Elementor > Tools 

I’ve created a page with just a menu template and when I’m in the Elementor editor, the menu functions like it should with the chevron dropdown...but when I “Preview” it or take it live, the drop down isn’t there.

Obviously, I continue to flush all caches each time I change something.

Here’s the test page I’m working on : https://bjosephburch.com/menu-test/ : but the problem is site-wide...including a different menu in my footer.

It doesn’t work on desktop Chrome, Safari, nor mobile.

I have Elementor Pro.

Any advice?

Merci,

Bernard

P.S. I have not tried to disable all plugins—please don’t make me do it—because I’m assuming it’s an Elementor problem, as it was working BEFORE.

Tried all.

And another css & javascript tries. So.

Elementor is free is good. Elementor pro is shit. 
Don’t purchase it!!

Userlevel 7
Badge +4

@Marisa Steyn did you find your answer here? If so, please consider clicking “Best answer” to help out others. If you found it elsewhere, please share it here so we can mark your answer as the best one, thanks :)

Reply