luk4

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 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.

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, 2 months ago by luk4.

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;
}

Hi,

The back end looks like this below

I think you’ve forgotten it.

Anyway, the HTML of the page refers to JS and CSS assets optimized by Autoptimize that are not available anymore. This is probably because WP Fastest Cache is serving an outdated version of the page.

Try to clear/flush/delete both WP Fastest Cache cache and Autoptimize cache.

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

You’re welcome! ?? Please, don’t forget to mark the thread as solved.

Awesome! Have agreat day ??

Hi,

Well, I’m really sorry but I’m afraid your website have been hacked ??

Don’t worry though. First, contact your hosting provider and try to restore a backup of the website before it was compromised. This is the easier and quicker solution.

Then, or if you can’t, read and follow the dedicated FAQ: https://www.ads-software.com/documentation/article/faq-my-site-was-hacked/

Keep in mind there is no alternatives to the golden rules:

• Keep WordPress, themes and plugins up to date. Enable automatic updates.
• Do backups on a regular basis.
• Have strong passwords policy and enable 2-factor authentication.

Good luck with that, you’re going make it through! ??

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

In your WordPress dashboard, go to Settings > General and be sure WordPress Address (URL) and Site Address (URL) are set with https://

Then, try again.

Hi,

Well, it seems your Object Cache plugin is crashing the website for some reasons.

Connect to your hosting dashboard and delete the following file through the file manager (or via FTP) : /www/resormedv.se/public_html/wp-content/object-cache.php

Then, you should be able to log in in WordPress as usual and review your settings.

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

Hi!

The URL of your logo image is starting with https:// scheme but should be https://. Firefox is clever enough to automatically try https:// but not Chrome, hence the missing logo in Chrome.

Try to remove and add again the image in your theme settings. This should be enough to fix the issue.

Awesome! ?? Please, don’t forget to mark the thread as solved.

Have a great day!

Hi,

Install WP Crontrol to gain a clearer understanding of what’s happening with Cron events: https://www.ads-software.com/plugins/wp-crontrol/

Otherwise, are you using an object cache? If so, try this: https://sopriza.com/cron-reschedule-event-error-for-hook-could_not_set-or-saved-solved/

Don’t keep the snippet in functions.php though. Delete it after a few refreshes.

@decli Yes, the CSS snippet I shared works perfectly on mobile devices. Your browser cache has not been cleared. 100% sure. Use another device or browser if you can’t clear the cache. You can also see what your web page looks like on mobile devices using a third-party service such as https://www.screenshotmachine.com.

@jawad1234 There’s no need to target mobile devices specifically in this case since, by default, the element is displayed for all devices and hidden only for desktops using CSS. A rule that hides it globally is therefore sufficient. Moreover, the element is displayed by default for devices with a minimum width of 980px, so the media query rule should be at least @media(max-width: 979px), not 400px. Finally, the onMobileOnly class seems way too imprecise imo, and risks hiding other important elements of the website. This is why it’s important to limit the scope of the rule to the search results page with body.search-results.

It works, I just checked. ??

If you don’t see the result on your side, try clearing your browser’s cache, or open a private navigation tab, or try with another device or go to https://howtohardrefresh.com to learn how to force a page refresh.