[Resolved] LInk to Offcanvas panel through menu item

Home Forums Support [Resolved] LInk to Offcanvas panel through menu item

Home Forums Support LInk to Offcanvas panel through menu item

Viewing 15 posts - 1 through 15 (of 22 total)
  • Author
  • #2342302

    HI there,

    I wanted to ask if it is possible to link to the offcanvas panel via clicking on a menu item.
    In this site, I have added a widget to the offcavnas panel which contains a contact form.


    I would like to be able to open the panel by clicking on the “CONTACT” button in the menu.
    Is that possible somewhow?
    Or is it possible to style the MENU toggle to be the word “TOGGLE” and open that way.


    Is it possible to make the slide out wider – say 400px – I cannot seem to find the right css class to target.
    Thank yoU!

    Customer Support

    Hi John,

    Let’s tackle the first topic first. We can try to add a label to the Off Canvas menu toggle then alter it’s appearance through CSS.

    If you’re good with this, may kindly add a toggle label, and let us know once you’ve done so?


    Yes – sounds good – Step 1 done!

    Customer Support

    Hi there,

    quick question, whats the expected behaviour on Mobile ?


    I originally thought it would just be a standard menu link, so assumed the mobile menu would be normal (or use the offcanvas for that)
    Ideally I would like it to work in a similar way on mobile.

    Customer Support

    I see.

    Can you try adding this Snippet instead and remove the label?:

    add_filter( 'generate_svg_icon', function( $output, $icon ) {
        if ( in_array( $icon, array('pro-menu-bars', 'menu-bars', false)) ) {
            $text = 'Contact';
            return sprintf(
                '<span class="gp-icon custom-menu-icon %1$s">
        return $output;
    }, 15, 2 );

    Adding PHP: https://docs.generatepress.com/article/adding-php/#code-snippets

    This code will replace the Hamburger icon with a “Contact” text. After which, we can style it with CSS.


    Thanks Fernando.
    I have added that snippet and see the the Hamburger icon has changed to the text = contact.
    Just curious as to how you can workaround this for the mobile version?

    Customer Support

    That should work for Mobile as well. Can you try clearing cache?

    Looking at it from my end, it already changed to “Contact” on mobile as well.

    Now, try adding this CSS in Additional CSS:

    .custom-menu-icon {
        background-color: #0091ad;
        border-radius: 25px;
        color: white;
        line-height: 40px;
        margin-left: 15px;
        padding: 0 20px;
    .custom-menu-icon:hover {
        background-color: #783f76;

    OK great _ I have added that css and it looks great.
    So the next things is how to get the slide out to appear wider on the screen.
    Can you help me with that please?


    Although I am still confused how to get the regular menu to show on mobile now.
    Can you help me understand how the other menu items will show on mobile?

    Customer Support

    Can you try adding this CSS?:

    @media(min-width: 1025px) {
        body .offside--right.is-open, .offside-js--is-right .offside-sliding-element {
            -webkit-transform: translate3d(-400px,0,0);
            -moz-transform: translate3d(-400px,0,0);
            -ms-transform: translate3d(-400px,0,0);
            -o-transform: translate3d(-400px,0,0);
            transform: translate3d(-400px,0,0);
        body .main-navigation.offside {
            width: 400px;
        body .offside--right {
            right: -400px;
        body.offside-js--is-right.slide-opened .slideout-overlay button.slideout-exit {
            right: 395px;

    You may replace the values to your preference.

    Customer Support

    To clarify, do you want the default menu or the off canvas menu on mobile?

    If you want the default menu, in Appearance > Customize > Layout > Off Canvas Panel, set it to Desktop only.


    I have set that to be Desktop only.
    But on mobile, the CONTACT button now opens the menu items, not the contact form.
    Not sure how to have it working as a smaller version of the Desktop menu (if that makes sense)

    Customer Support

    Try adding the Form through an element hooked to inside_mobile_menu. Then we can hide and show the form through CSS.

    Let us know once you’ve done so.


    Ok – I have added the form through that element and it is showing in the mobile version.

Viewing 15 posts - 1 through 15 (of 22 total)
  • You must be logged in to reply to this topic.