Moble Menu not colapsed

Are you referring to this free NGO Organization theme at https://www.ads-software.com/themes/ngo-organization/ ?

Or are referring to some Pro/commercial theme?

• This reply was modified 1 year, 3 months ago by t-p.
• This reply was modified 1 year, 3 months ago by t-p.

Hi @mgondek

Regarding the menu behavior, there are two main issues:

• The sub-menu items are forced to be visible in mobile view by the theme with an!important CSS rule. This shouldn’t be the case imho and it’s going to force you to use cumbersome workarounds that I don’t really recommend. It might do the trick for now, but you better have to ask the theme developers to fix this or switch to a better coded theme anytime soon. Especially since it appears “This theme is retired“.
• The second “issue” is that the parent menu items are also links to regular pages. So it won’t be possible to “touch” them to un-collapse their sub-menu items without going to the page they’re linking to. For this reason, I recommend you to build a second menu dedicated to mobile devices where parent menu items aren’t linking to a page (choose “Custom Links” when building the menu, and leave the URL field empty).

That being said, and with a properly built menu, you should be able to fix your issue with the following CSS code to be inserted in style.css of you <span style=”text-decoration: underline;”>child theme</span>, or in the WordPress Customizer:

/* Hide sub menu items of the navigation menu in mobile view */
.mobile-menu li.menu-item-has-children > ul.sub-menu {
  display: none !important;
}

/* Display sub menu items when parent is touched */
.mobile-menu li.menu-item-has-children:focus-within > ul.sub-menu {
  display: block !important;
}

Please install that plugin https://www.ads-software.com/plugins/insert-headers-and-footers/

Step 1: Open that https://freeimage.host/i/JAAobZx

Step 2: Click on that https://freeimage.host/i/JAAxnGp

Step 3: Enter any name and select that option https://freeimage.host/i/JAAIfBR

Step 4: Then pasted that below code on this area then active and save that please see in the screenshot https://freeimage.host/i/JAA72It

<style>
.mobile-menu-container ul ul {
  display: none;
}
</style>

<script>
const menuItems = document.querySelectorAll('.mobile-menu > li');

function showSubMenu() {
  const submenu = this.querySelector('.sub-menu');
  if (submenu) {
    submenu.style.display = 'block';
  }
}

function hideSubMenu() {
  const submenu = this.querySelector('.sub-menu');
  if (submenu) {
    submenu.style.display = 'none';
  }
}
	  
menuItems.forEach(item => {
const link = item.querySelector('a');
const submenu = item.querySelector('.sub-menu');
if (submenu) {
    link.addEventListener('click', function (e) {
    e.preventDefault();
    submenu.style.display = submenu.style.display === 'block' ? 'none' : 'block';
    });
}
});
</script>

THANKYOU t-p! I added your code, thankyou and that collapsed the pages. I then instead of having landing pages for each of the 7 topics i made post categories and hoped. At this point on the mobile the menus are collapsed, btu wi woudl liek then to uncollapse when clicked. Please let me kwo if I missed anytying.

Here is another website I manage using modern campus where the mobile menu works acceptably collapsing and uncollapsing.

Muhammad I will try your suggestion tomorrow if needed. Just want to have a good backup/stopping point to call tech support incase something goes wrong.

I added your code, thankyou and that collapsed the pages.

Great! But be carefull, you added the CSS snippet to your theme, not child theme. This is not recommended. Add the CSS snippet to the WordPress Customizer instead.

I then instead of having landing pages for each of the 7 topics i made post categories and hoped. At this point on the mobile the menus are collapsed, btu wi woudl liek then to uncollapse when clicked. Please let me kwo if I missed anytying.

You don’t see the menu uncollapsing when touched because the parent menu item is a link to a page. No need to create categories. As mentionned, you need to build a new navigation menu for mobile devices in Appearance > Menus. Check this guide: https://www.ads-software.com/documentation/article/appearance-menus-screen/#creating-multi-level-menus Be sure level 1 parent items are not “Pages” (links) but “Custom Link” with a blank URL (add #) and insert all your pages as level 2 sub-menu items:

Here is another website I manage using modern campus where the mobile menu works acceptably collapsing and uncollapsing.

This is because you’re using a much better theme on this other website that correctly handles mobile menus. As mentioned, consider switching your theme soon.

The solution provided by @jawad1234 is another valuable approach, but you’ll encounter the opposite problem than with mine: you won’t be able to open a page linked from a parent menu item.

In the end, you won’t have any other choice than to create a new navigation menu for mobile devices, just because you cannot “hover” on mobile devices.

• This reply was modified 1 year, 3 months ago by luk4.

I want to switch the theme, but I bought Divi and switched and it took the website down. I had to call the tech line and they restored the site to an older version. Other problems opened up like the logo was tiny, so want to continue if I can fix this them for awhile as am learnign and gettng my bearings in wordpress. Next week will I set up a time with the helpdesk they will be available holidays for me to to test other themes. Please recommend a theme if that is an easy way out of this.

I removed the categories and did Custom Links #.

I also added the code snippet per Muhammad. I added the ending style tag, and flipped the switch to apply. Nothing happened.

I am so thankful you are all trying to help me. I implemented the suggestions of 3 people, and still not working. Getting confused as to whose recommendation I should follow, and if I should combine them. If anyone would be so kind as to continue to help me, hopefully am close. Apologies if I did something wrong, I am not a coding or wordpress expert.

I removed the categories and did Custom Links #.

For now, parent menu items (ABOUT, EVENTS, PROPERTIES, PUBLIC RECORDS, RESOURCES, SENIORS and SERVICES) are still links to categories. Maybe you forgot to save your edits? If you manage to replace them by a Custom Link with # as “URL”, it will work. You’re very close!

I also added the code snippet per Muhammad. I added the ending style tag, and flipped the switch to apply. Nothing happened. […] I implemented the suggestions of 3 people, and still not working. Getting confused as to whose recommendation I should follow, and if I should combine them.

No, you should try a solution from one person only. Do not combine them. The solution by @jawad1234 is not bad, it’s just a different approach. If all solutions are implemented altogether, it won’t work as expected.

The parent menu items should be # with urls NOW. I made the changes accidenatlly to my mobile menu version on accident. Apologies this WordPress is new to me.

Can you please walk me on what to do next. I tried using both of the 2 methods alone, and still no mobile menu that collapses and uncollapses. Right now is set to muhammads method. We should be close now as the mensu are set to #. I also found a great plug in to allow duplication of menus as there was some talk about that, but did not see what I needed to do differently for the mobile version. I know that resetting the cache could be an issue in troubleshooting this, adn i belvie my iPhone is set to reset the cache os am proofing there, and making changes on my computer while trying to implement this.

• This reply was modified 1 year, 3 months ago by mgondek.
• This reply was modified 1 year, 3 months ago by mgondek.

The parent menu items should be # with urls NOW.

Great. But unfortunately, you removed the CSS code I provided earlier. As mentioned, you have to follow instructions of one person only and do not mix different approaches.

Add again the following code in the WordPress Customizer:

/* Hide sub menu items of the navigation menu in mobile view */
.mobile-menu li.menu-item-has-children > ul.sub-menu {
  display: none !important;
}

/* Display sub menu items when parent is touched */
.mobile-menu li.menu-item-has-children:focus-within > ul.sub-menu {
  display: block !important;
}

I removed the code form muhammad, and I added the code to the customizer >> Addiitonal CSS. The menu on mobile is collapsed, but wil not expand.

There was some talk earlier abotu creating a dupciate of the oringla menu for the mobile, but I did not see anything about how to make that differetn or to enabel for the mobile.

I wanted to anounce tomorrow evening on social media for people to visit the new website. If someone could help make the mobile version of menu work nicley, the township would be very grateful.

I removed the code form muhammad, and I added the code to the customizer >> Addiitonal CSS. The menu on mobile is collapsed, but wil not expand.

The menu now works and expand on click/touch. Well done! If you don’t see it yet, you need to clear your browser cache.

Thanks for the video, as I tried on both Chrome & Safari on iPhone and does not work for me. Clearing cache can be quite complex (especially on Chrome), but I never booted Chrome on my iPhone. I also cleared history and website date on my iphone.

I click on any of the 7 options and they turn darker green, but do not expand, the menu is stuck collpased on my iPhone. Might this be an iPhone compatibility issue.

My brother confirms is working also, so must be problem on MY iPhone. Happens in both Chrome and Safari on my iPhone Pro Max 15 Ios 17.2.1 (most current). I have javascript on, restarted my phone, and have cleared history/cache on both browsers. The problem is the menus are not expanding on my mobile device. HELP

Anyone else have IPhone 15 can you let me know what you see.

• This reply was modified 1 year, 2 months ago by mgondek.

The snippet rely on :focus-within which is supported since iOS 10.3 according Can I use website. So, yes, it should work even with your phone. Try to visit the website in a private tab (aka incognito).

On 3 iPhones it does not expand the menu in Chorme or Safari, and even on a private tab. The phone that it did work on was a google Pixel Phone. Have not tested on Android.

I also tried Muhammad’s code. Is quicker for me to put his code in Additional CSS to replace T-P suggestion, but got a error in the code and would not publish, but does not say which line. Can I try Muhammad’s code in Additional CSS (is much easier than trying to ensure customizer plug in is working)?