Archived topic

Retain Off Canvas Functionality But Hide the Default Trigger

3 replies · Started by Michael on February 2, 2021

Viewing posts 1–4 of 4

February 2, 2021 at 12:31 pm #1643427

Currently I'm using the primary, secondary and off canvas panel. The off canvas panel is set to Desktop only but I would like to hide the default trigger (see screen capture) and replace it with a custom link I created in the secondary menu with the slideout-toggle class applied to the link. I would also like to hide the empty little square icon that seems to pop up when applying the # to the URL to trigger the slide out.

Thanks much,

Mike

February 2, 2021 at 12:47 pm #1643450

Hi Michael,

You could use this CSS to hide the hamburger icon:

.menu-bar-item.slideout-toggle.has-svg-icon {
    display: none;
}

Then apply this CSS class to the link in your secondary menu: slideout-toggle.

And this CSS to hide the square:

.slideout-toggle:not(.has-svg-icon) a:before {
    display: none;
}

Let me know :)

February 2, 2021 at 2:22 pm #1643528

Thanks Ying. The first part worked great. I had to add just a little more on the second solution and it seemed to work great.

nav#secondary-navigation .slideout-toggle:not(.has-svg-icon) a:before {
    display: none;
}

Thank you again,

Mike

February 2, 2021 at 4:49 pm #1643604

Great, you are welcome!

Glad it worked :)

This archived topic is closed to new replies.

Start building better websites today.