[Resolved] LInk to Offcanvas panel through menu item

[John]

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.

https://rachelkindt.com

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.

ALSO

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

[Fernando]

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?

[John]

Yes – sounds good – Step 1 done!

[David]

Hi there,

quick question, whats the expected behaviour on Mobile ?

[John]

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.

[Fernando]

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">
                %2$s
            </span>',
            $icon,
            $text
        );
    }

    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.

[John]

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?

[Fernando]

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;
}

[John]

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?

[John]

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?

[Fernando]

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.

[Fernando]

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.

[John]

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)

[Fernando]

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.

[John]

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

[Author]

Posts