Tagged: Catch Responsive Pro, menu, mobile, Mobile Menu
- This topic has 10 replies, 2 voices, and was last updated 6 years, 5 months ago by
Skandha.
-
AuthorPosts
-
February 26, 2018 at 10:27 am #132395
Carey
ParticipantI 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!
February 26, 2018 at 11:00 pm #132424Skandha
Participant@cjcjcreativedesign-com: Please post in your site URL.
Regards,
SkandhaFebruary 27, 2018 at 9:24 am #132459Carey
Participantwelcome.smls.org
February 27, 2018 at 11:23 pm #132505Skandha
Participant@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,
SkandhaFebruary 28, 2018 at 9:36 am #132552Carey
ParticipantThank 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?
February 28, 2018 at 9:42 am #132553Carey
ParticipantHovering 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?
February 28, 2018 at 11:16 pm #132582Skandha
Participant@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,
SkandhaMarch 12, 2018 at 9:57 am #133331Carey
ParticipantIt 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.
March 13, 2018 at 3:56 am #133364Skandha
Participant@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,
SkandhaMarch 13, 2018 at 12:38 pm #133382Carey
ParticipantThank 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?
March 14, 2018 at 4:57 am #133419Skandha
Participant@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 -
AuthorPosts
- The topic ‘Collapse mobile menu on Catch Reponsive Pro’ is closed to new replies.