[Support request] Mobile Menu and other issues

[Paul]

I am not able to click the Menu Tile but only the Menu Icon.
I am using the option in the Menu pages option in wordpress. So they are not custom links, but dynamic pages.
Is there a way I can get the titles to be clickable that have submenu icons next to them.
Also, are there ways to add other items underneath the menu like buttons and such?
And is there a way to enable sidebar on multiple pages at once?

[Leo]

Hi there,

Any chance you can link us to the site in question?

You can use the private information field.

Let me know 🙂

[Paul]

Right now my site is in staging while I convert my site to your new theme. That page is…
https://www.staging8.dailycdev.com/

My current website is https://www.dailycdev.com/ and is using Customizr Pro for the theme.

[David]

Hi there,

in Customizer > Layout > Primary Navigation you can change the Navigation Dropdown option. Currently its set to hover, which obviously don’t work on mobile, but it also considers that the Parent Menu may be a link itself so it limits the drop down tap target to just the Toggle.

One option would be to change the Navigation Dropdown option to Click on Menu Item, but this will apply to the desktop as well….

Or we can throw some CSS at the toggle to increase its tap target size for mobile… but before that lets deal with point 2.

If you want to add non menu item conent below the menu then the best bet is to enable the Off Canvas Panel for mobile menu. It has its own widget area ( and two hooks ) for adding stuff:

https://docs.generatepress.com/article/off-canvas-panel-overview/

If the off canvas is a good option for you – enable that and ill take a look at the CSS for increasing the mobile tap target.

[Paul]

I do not wish to change the mobile menu, but simply make it so that the title will click and the menu will open. I am very surprised nobody else has said this yet. I simply told Customizr Pro this issue over a year ago and they fixed this it with an update within a weak. Are you saying that this is not something that can be done? You mentioned CSS and I am interested to see if that works also.

[Elvin]

Hi there,

but simply make it so that the title will click and the menu will open.

This is quite tricky to deal with because:

The menu item link is a dynamic page, meaning it’s a live link.

The dilemma is, if we turn the menu item live link into a submenu item toggle by clicking it using “Click – Menu item”, we effectively have to stop the menu item from being a link to the dynamic page.

Note: because if we don’t, when we click the menu item, we will be brought to the page associated to the menu item.

Now the closest compromise to this is by setting the menu to “Click – Arrow” so we can still have some sort of toggle for the submenu by clicking the arrow while keeping the live link working when we click the menu item title.

[Paul]

I am happy to say that I fixed the issue.
I simply added a # for the URL for the custom link menus.
Now they open and close when clicking on the title or drop down arrow.
Thanks.

[Elvin]

Yeah, that’s pretty much is the same thing as not making the menu item a “live link”. having # as an href means it won’t go anywhere so it basically just toggles the submenu.

Glad you got it sorted. 🙂

[Paul]

I am back. My site is https://dailycdev.com/. I removed the # on the menus as it refreshing the page when clicking on them in desktop view. Is there any update to fixing the issue for mobile. without the #, the title does not allow menus to open and close.

[Paul]

adding top menus with # refreshes the page when clicked. I have not seen this without other themes. Please correct this as people are trying to get to submenus on PCs and Laptops and clicking on the top menus instead of hovering them, which refreshes the page. This appears to be a bug that needs corrected.

[Paul]

I fixed this myself by adding this javascript code in the footer area site wide…
jQuery(‘#menu-menu-1>li:nth-child(n+2)>a’).removeAttr(‘href’);

What this does is remove the for the desktop menus but not the mobile menus.
So the desktop top menus are not clickable, but the mobile menus are.
It would be wonderful if this was just fixed in an update so I could remove this script from my code.

[Fernando]

I see. Glad you resolved the issue Paul. Feel free to reach out anytime you’ll need assistance with anything else.

[Author]

Posts