[Carey]

I have a lot of menu items on my website. It is fine on a computer screen because the second and third level menu items do not show up until I hover over the top menu item. However, on a mobile device, all the menu items show up on the left (every item is visible at the same time). Is there a way to set the menu items to collapse and expand so the list isn’t so overwhelming to look at on a mobile device?

Do I need a specific plugin for that?

Thank you!

[Skandha]

@cjcjcreativedesign-com: Please post in your site URL.

Regards,
Skandha

[Carey]

welcome.smls.org

[Skandha]

@cjcjcreativedesign-com: Go to => Appearance => Customize => Additional CSS and add the following CSS Code.

.sidr ul li ul { 
    display: none;
}
.sidr ul li:hover ul { 
    display: block; 
}

Let me know if this solves your issue!

Regards,
Skandha

[Carey]

Thank you. I added that css and it works for the second level.

Is there a way to add the third level menu items and collapse them like you showed me on the mobile menu also, or does it only work for the second level menu items?

[Carey]

Hovering is difficult on mobile device. I touch the main level menu button, and it takes me to the linked page. I try to hover, but it is really hard with a finger.

Can this be done with clicking instead of hovering?

[Skandha]

@cjcjcreativedesign-com: Yes you can add a third level menu and collapse them as well.
To make the second level menu display on clicking rather than on hover replace the text :hover with :active in the previous css code i provided you!

Let me know if this solves your issue!

Regards,
Skandha

[Carey]

It works for collapsing the first level, but I cannot get it to show anything for the third level. I’m sure it’s just me not understanding how the menu is set up.

The other mobile menu issue I’m having is that whether on hover or on click, the top menu item gets selected instead of opening to show what’s beneath. Is there a way to fix this?

I want to be able to open the page for the top level item if I click on it a second time. The first click (or hover) should expand the menu to the second, and then, the third level.

[Skandha]

@cjcjcreativedesign-com: Go to => Appearance => Customize => Additional CSS and add the following CSS Code.

To show the third level menu only on hover.

.sidr ul li ul li ul {
	display:none !important;
}
.sidr ul li ul li:hover ul {
	display:block !important;
}

Let me know if you want the menu to expand when clicked rather than on hover.

Let me know if this solves your issue.

Regards,
Skandha

[Carey]

Thank you. I love how it looks, and it allows viewers to see all of the menu items now.

Clicking would be nice, but if you click on a menu item with sub-items, it follows the link of the menu item instead of displaying the sub-items.

Have you run into this before? Is there a way to click one time to view sub items, and click a second time to follow the link of the parent menu item? What is the best way to handle menu items with links that are parent menu items?

[Skandha]

@cjcjcreativedesign-com: It is not possible to view the sub-menu items on the first click and follow the link of the page on the second click using additional CSS. If you really want this I suggest you to hire a customizer.

Let me know if this solves your issue.
Regards,
Skandha

[Author]

Posts