[stacey aParticipant]

I am having a user/functional problem with my menu when using mobile.

The main Nav Items appear fine when the users click on the “hamburger icon”. The problem is that my main menu items have sub-menu items and in order for the user to expand to the sub-item they have to click exactly on the “downward” facing arrows (that denote that there are sub-menu items). If they do not click on the downward arrows they go the the main item page which is not what they want…a high majority of the time anyway and this is very frustrating and confusing for them

People don’t understand how to expand the submenu (it took me time to figure out what was happening too). I do not think this is how it should work in mobile (and I believe I have read some things here about it before the big update with the navigation).

In the mobile environment I think that users should click on the main heading link and the menu should expand to reveal the sub-menu items – the downward arrow simple tell the user that this are selections under the main menu item.

How can I do this?

Thanks
Stacey

[RadModerator]

Hi Stacey,

Thanks for writing in.

That’s the current setup for X’s mobile menu to ensure that top level menu will load the other page. I understand that some user wish to link their top level menu, and some are not.

On the other hand, applying the click to top level menu will trigger sub-menu but will also kill the linking to another page. And requirements could be different from user to user just like yours.

Mobile does not have hover event, instead both and hover are triggered on same time. The best and safe solution is expand sub-menus by default so visitors will only have to scroll them. Add this css at your customizer’s custom css.

.x-navbar .mobile .x-nav ul.sub-menu.collapse {
display: block!important;
height: auto!important;
}

Thanks and let us know what you think.

[stacey aParticipant]

I tried the CSS and it is not the action I am looking for – what this does is fully expand the entire menu and sub menu items when you click on the hamburger.

What I am looking to do (and it did work at a point back in time before the update with the rebuilt nav function as I had some CSS that I found in the forum that worked, but it messed things up when X menu was redesigned) is:

This is for small format/mobile only

1. When you click on the hamburger icon the main menu items appear with the downward arrow that denotes that there are submenu items.

2. User clicks anywhere on the main menu item button to expand the sub menu items.

3. User can then click on submenu item to take them where they want to go.

Can you offer any CSS magic??

Thanks
Stacey

[Nabeel AModerator]

Hey Stacey,

The only thing you can do is that you can open the sub menus by default in smaller screen. Try adding the following CSS code via Appearance > Customize > Custom > CSS:

@media screen and (max-width: 979px) {
.x-navbar .mobile .x-nav ul {
display: block !important;
}
}

Hope this helps!

[jacf182Participant]

Hi. I’m sorry to revive an old thread, but today I was having the same issue as the OP, and I easily managed to make it work. I’m posting it here because it can be helpful to anyone who may want the same functionality.

All you have to do is make the arrow’s container 100% wide, and give it a z-index of 999. That way the sub-menu will expand no matter where you click on the sub-menu item. Add this to your CSS:

/*Mobile Menu*/
.x-sub-toggle {width:100%; z-index: 999;}

That’s it. I actually like the way the arrow moves closer to the word, but if you want to have the arrow on the right as it normally is, all you have to do is add this to your CSS:
.x-sub-toggle .x-icon.x-icon-angle-double-down {float:right;}

That’s it.

I’m actually surprised Staff missed something as easy as this and could not help the original poster.

Cheers

[LelyModerator]

Hello Jac,

Thank you for sharing this and helping the community.

Cheers!
X

[stacey aParticipant]

@jacf182 – thank you for taking your time to share this. I am going to try it!

Thanks again & I hope I can return the favor down the road
Stacey

[John EzraMember]

Hi Stacey,

Please let us know if the solution works for you or not. Thanks!

[MatthewParticipant]

Hi,

I was having this same issue and added the css suggested above:

/*Mobile Menu*/
.x-sub-toggle {width:100%; z-index: 999;}

This worked great and resolved the issue. However, I tried using the second code to move the arrow over to the right:

.x-sub-toggle .x-icon.x-icon-angle-double-down {float:right;}

Unfortunately, that code did not work for me. I’d love to move the arrow to the right if possible, or even try some different CSS to accomplish this. Not the biggest deal, but would look a lot better on the right as it does by default. Any suggestions?

[ZeshanMember]

Hi @mxpisani,

Thanks for writing in! To assist you with this, we’ll first need you to provide us with your URL as stated on the forum entrance page. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you.

Thanks!

[MatthewParticipant]

This reply has been marked as private.

[Rue NelModerator]

Hello @mxpisani,

To move the icon to the right, please use this code instead:

.x-sub-toggle span .x-icon-angle-double-down {
    float:right;
    margin-right: 10px;
}

We would loved to know if this has work for you. Thank you.

[MatthewParticipant]

Wow! That worked perfect, and looks awesome now. Thanks! You guys rock.

[FriechModerator]

Glad we could help, Cheers!

[Author]

Posts