Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #132395
    Carey
    Participant

    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!

    #132424
    Skandha
    Participant

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

    Regards,
    Skandha

    #132459
    Carey
    Participant

    welcome.smls.org

    #132505
    Skandha
    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,
    Skandha

    #132552
    Carey
    Participant

    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?

    #132553
    Carey
    Participant

    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?

    #132582
    Skandha
    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,
    Skandha

    #133331
    Carey
    Participant

    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.

    #133364
    Skandha
    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,
    Skandha

    #133382
    Carey
    Participant

    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?

    #133419
    Skandha
    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

Viewing 11 posts - 1 through 11 (of 11 total)
  • The topic ‘Collapse mobile menu on Catch Reponsive Pro’ is closed to new replies.