Problem with mobile menu

[logoglo]

Hi, please see https://foresthillcentre.com/

Testing this on my xiaomi redmi note 10, there is an issue with the menu. So if you click on one of the sub menus, it will work, and takes you to the correct section on the page. But, whilst there, if you notice, the other menus items for that page, are in a different color (like the rollover state, or hover) and you cant click them.

Here is a video to further show you what I mean: https://foresthillcentre.com/wp-content/uploads/2022/03/video-1648744925.mp4

Thanks.

[ruenel]

Hello @logoglo,

Thanks for posting in!

Your submenu items are just anchor links towards each section of its parent menu item which is just on the same page.

This is why, the submenu items are of the same color as the parent menu item.

Hope this makes sense.

[logoglo]

The color isn’t the issue, the issue is, on the mobile, if you click the menu items, they don’t work, in the video, I’m clicking all of the submenu items,and it doesn’t scroll to section, they do not work,

[ruenel]

Hello @logoglo,

Actually, there isn’t an issue. You can click on the submenu items. You are not noticing that the page is changing because the dropdown did not close or collapse. Please check out this video:

https://www.youtube.com/shorts/RIWdR5t8gI4

This becomes an issue for you after you have inserted this custom CSS:

@media (max-width: 979px) {
  .x-navbar-fixed-top {
    position: fixed!important;
  }
}

If you remove the custom CSS code, you can easily see that the links goes to the respective section. if you are trying to make the navigation as sticky, then you will need additional coding so that when the user clicks on any submenu items, your mobile menu will automatically collapse.

Be advised that custom coding development is beyond the scope of our support under our Support Policy. If you are unfamiliar with code and resolving potential conflicts, you may select our One service for further assistance.

Thank you for your understanding.

[logoglo]

I have this set up using this code, the menu does work as it should, if you are on the homepage, and click contact, the page scrolls down, and the menu collapses.

window.csGlobal.csHooks.filter('hash_scrolling_offset', (offset) => {
    return offset - 120;
} );

jQuery(document).ready(function($){
	$('.x-one-page-navigation-active .x-navbar .mobile .x-nav > .menu-item:not(.menu-item-has-children)').on('click touchend', function(e) {
		document.getElementsByClassName("x-btn-navbar")[0].click()
	});
});

I have this code (without the “return offset - 120;” part) on these sites, and the menu works as i should:, collapses, but, the issue is the same on these pages too, I just noticed.

Affordable Logo Design & Graphic Design – Logoglo

On the about us page, if you are there, and click on the menu, and testimonials, its doing the same thing, the menu doesnt collapse. It seams to be when there is a scroll to section on the same parent page, using submenus.

https://accel-corporation.com/ (same thing is happening here on the services page)

Thanks for your help.

[ruenel]

Hello @logoglo,

You can remove .x-one-page-navigation-active and :not(.menu-item-has-children) in your JS code above so that when you click on any of the menu item, your menu will collapse.

Again, be advised that custom coding development is beyond the scope of our support under our Support Policy. If you are unfamiliar with code and resolving potential conflicts, you may select our One service for further assistance.

You will need to contact the person who created your JS code. You will have to maintain any custom coding to make sure that it will still work after any updates or does not create any issues or incompatibility in the future.

Thank you.

[logoglo]

That kinda works, but when the menu is collapsed, you need to click on the little arrow to collapse the submenu, and in doing so, the entire thing retracts…you will see on a mobile device, how this is not working as best as it could.

As per your note, you guys provided this code in a previous thread.

[logoglo]

If there is a way to have this working better, Id appreciate it.

Thanks.

[tristup]

Hi @logoglo,

Unfortunately, there is no way except the customization. And as stated by my colleague that is beyond the scope of Theme Support.

Thanks

[logoglo]

Well, this kinda sucks, I understand, but the functionality is reduced. I believe the nav bar should always be visible on a mobile, (and collapse when not in use, ie after clicking) for better user experience, this code was given by you guys, so Im guessing it should be pretty easy to modify.

Thanks Ruel, as always a good sport.

I will be requesting this as a feature to future updates.

[ruenel]

You are most welcome, @logoglo.
By the way, we will be adding this as a feature request as well.