Menu not long enough on mobile

Support
#1

I’ve got a site http://wgilive.wpengine.com and the menu is quite large. There are sub sub menus as well. The problem i am having is the menus are longer than the visible space, and so it is hiding some of the tabs and I’m not sure how to show the full sub sub menu.

#2

Hey,

Thank you for writing in!

I have checked your site and the menu looks normal - could you send to me some screenshot?

#3

On mobile as you can see the submenu for world championships ends at hotels, wherein there is actually more menu items as seen on the desktop capture.

#4

#5

Hi,

You will not be able to use the Navigation Dropdown element on a smaller screen due to the fact that the nested dropdowns must always be positioned to the side of their parent link (it would provide a strange user experience if a nested dropdown were to keep overlaying its parent). For these situations, you will want to utilize the Navigation Collapsed element on smaller screens with menus that have multiple levels.

Thanks

#6

I’m not sure if you catch my meaning. I am using the navigation collapsed on mobile (small screen size) but if you see in the 2nd screenshot I sent the whole submenu is not showing. it doesn’t push down the next parent page to make room for all of the elements listed under it. As an example on that site, if you view it on mobile and you go to the menu:

color guard, then click world championships, you only see schedules tickets, volunteer, venues, hotels… then it starts with the other main tabs percussion, winds, and about wgi, but the problem is it is not listing the last 3 pages under world championships (webcast, car rentals, and merchandise) It has a fixed height and so on mobile it is impossible to get to those other pages…

#7

Hi There,

We’re sorry for the inconvenience this has caused you. This is a confirm bug and we have forwarded this issue already to our developer. We will let you know once we have an update. Thank you for understanding.

#8

when is this bug being fixed? seams like a major issue to me. Since 65% of website traffic is mobile. What is the work around until it is fixed?

#9

Also another bug you have with the drop down menu on mobile is the main nav button links do not work! So you only can access the pages in the subnav not the primary. When is this going to be fixed?

#10

Hi @aion,

Thanks for writing around! Developers are already working on it and the fix will be released soon. In the mean time you can add the following CSS code in the Theme Options > Global CSS or in the Customizer via Appearance > Customize > Custom > Edit GLOBAL CSS to fix the issue:

[data-x-collapse="opening"]>ul.sub-menu {
    overflow: auto !important;
    height: auto !important;
}

Hope this helps!

1 Like
#11

I’m also having problems with the new flex menu in Sarfari version 6.0.5 seams to not load correctly. Is there away to load another menu for older browsers just incase these issues pop up? Want to make sure the user experience is good for viewing.

#12

Hi again,

Older safari browser’s are not supported, even Apple is not supporting them (see https://en.wikipedia.org/wiki/Safari_version_history#Version_compatibility) you need at least safari v10 to display things correctly.

Hope this helps!

1 Like
#13

@Nabeel yea the problem is most of the visitors who come to this site view the website in older browsers such as Safari and older versions of IE. So I guess for now I got to go back to the standard menu that comes out of the box until there some work around to make it user friendly for all visitors :confused:

#14

it would be cool if you could add a rule to the new menu that falls back on the standard menu if Java is not updated. Think this is possible to create?

#15

Hi there,

Unfortunately, it is not possible to have that kind of backward compatibility. The whole concept of Header/Footer builder is built on the FLexbox technology and it is not feasible to support older browsers as it will need to re-write the whole system from scratch.

Thank you for your understanding.

#16

The top Menu of the Collapsed Navigation is not coded to go to a link. It is intended to open up a sub menu item. But we already added a feature request regarding this:

Thank you for your understanding.