[Resolved] Slideout menu toggle

[Kristy]

Hi there. I’m using the Slideout template from the site library, and it has the hamburger menu icon plus the word “menu” vertically underneath it. Currently the word menu seems to be just for labelling purposes and doesn’t active the menu toggle. But I’ve had feedback that this confuses users. Could you advise on how to include the word menu in the menu toggle trigger?
Let me know if that is not clear. Please and thanks!

[David]

Hi there,

hmm desktop slideout toggle doesn’t have a label like the mobile menu, so we could fake one with this CSS:

@media (min-width: 769px) {
    .main-navigation .slideout-toggle a:after {
        content: 'Menu';
        display: inline-block;
        writing-mode: vertical-rl;
        text-orientation: upright;
        position: relative;
        right: 17px;
    }
}

Then edit the Menu that is assigned to the Primary Navigation and delete the menu item. But leave the menu assigned to the Primary Navigation although it may be empty.

[Kristy]

I didn’t use the text-orientation bit, but otherwise worked like a charm! Thank you!

[David]

Glad to hear that!

[Author]

Posts