Mobile Menus not working - PurpleQuest

The Top menu is not working when connecting via mobile. I get 2 drop-down bars the top one just says Go To ... the bottom which is the category menu works fine. I have tried disabling all the app and still have the same issue.

I also notice when I go to http://iljd.org/bethel-locations/ mobile the form is cut and there is no way to view all the data on the page.

Hi!

The reason for the problem is the renamed ".menu-topmenu-container" class for top menu. I can't guess how it happened, but script is working only with this class. To fix this just replace the code:

<script>
			jQuery(document).ready(function(){
				jQuery('.menu-topmenu-container li').each(function() {
					jQuery('<option />', {
					'value':jQuery(this).find('a').attr('href'),
					'text':jQuery(this).find('a').html()
					}).appendTo(jQuery('#mobile-sec-menu'));
				});
			});
		</script>

with:

<script>
			jQuery(document).ready(function(){
				jQuery('.menu-navagation-container li').each(function() {
					jQuery('<option />', {
					'value':jQuery(this).find('a').attr('href'),
					'text':jQuery(this).find('a').html()
					}).appendTo(jQuery('#mobile-sec-menu'));
				});
			});
		</script>

in the functions.php file of the theme.

Thank you that worked great for the menu.


What about my other issue.

When I go to http://iljd.org/bethel-locations/ mobile the form is cut and there is no way to view all the data on the page.

Thanks!!!

Hi!
If I use Android 5.1 standard browser the mobile menu has an ability to scroll down to view all the items. The same happens in Safari on iPhone. Could you clarify the mobile device you are using and browser, please.

I have the ability to scroll down, but not side to side. So it shows it 1/3 of the locations. I am using android it happens with both the standard browser and Chrome.

Hi!

The reason for this is your table. I don't know how you have inserted it into the page, but its code is:

<table width="985" cellspacing="0" cellpadding="0" border="0" style="border-collapse: collapse; height: 963px;">

Thus, the table is 985px width on all screen sizes. Please, try to add another value for its width - width:100%; is the best way to solve this problem.