[Resolved] Two menus in off-canvas panel

Home Forums Support Two menus in off-canvas panel

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #945628
    GG

    Hi Tom. How easy or difficult would it be to assign two different menus to the off-canvas panel and then restrict each type of menu by device resolution? I see that if the off-canvas panel is set to on, the menu assigned shows on both desktop and responsive devices. I was thinking more of like the primary menu and an extra menu assigned to the panel where the extra menu shows on desktop and the primary menu retains the off-canvas feature on responsive devices, but each menu is hidden from the screen resolution on which it is not supposed to appear.

    #945651
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    That’s a tough one.. You could create a single menu which holds all of the menu items, and then hide some of the menu items depending on the device.

    You could also try to hook another menu into the slideout navigation hook, and style it with CSS. However, that extra menu likely wouldn’t inherit any of our default off canvas menu CSS, as it would have different selectors.

    Let me know if you need more info 🙂

    #945884
    GG

    Thanks for the reply, Tom. This question is based somehow off this one. I found it very difficult to use the classes suggested because the hamburger icon was showing before every submenu name not only the parent link. I am revamping my menu and have renamed some categories to shorter versions but still would like the ‘more’ menu to be a hamburger menu, only that I am not sure how that would look on responsive devices.

    #946223
    Tom
    Lead Developer
    Lead Developer

    the hamburger icon was showing before every submenu name not only the parent link

    Not too sure what you mean here – do you have a screenshot I can see possibly?

    #946403
    GG

    Hi Tom. Like when you assign the slideout-toggle class to the ‘more’ link, the hamburger icon shows before the word ‘more’. But when you hover over the dropdown menus, they also inherit this behaviour and show the icon before every submenu link e.g. hamburger icon about us etc..

    #946584
    Tom
    Lead Developer
    Lead Developer

    Ah, well you can stop that from happening with some simple CSS. Can you link me to a page where it’s happening?

    #946605
    GG

    Hi Tom. I will add the class and you can check the homepage linked from the first post. Just check the more link and you will see what I mean. I have added theslideout-toggleclass. Also, if possible, help me with additional css to hide the word more and the dropdown icon on desktop devices (current mobile width set at 959px) and just retain the hamburger menu that makes the submenu visible on hover.

    #947081
    Leo
    Staff
    Customer Support

    This CSS should hide More from submenu:

    .main-navigation .main-nav ul ul li a:before {
        display: none;
    }

    Adding CSS: https://docs.generatepress.com/article/adding-css/

    Let me know 🙂

    #947143
    GG

    Thanks Leo. I figured out the rest.

    #947215
    Leo
    Staff
    Customer Support
Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.