[Resolved] Slide-out Menu Close Toggle

[Danny]

Hello, I would like the X toggle to close the slideout hamburger menu on both desktop and mobile to be on the left or the same place as the hamburger menu. It currently displays the right to close it out.

[Leo]

Hi there,

Try this CSS:

.slideout-navigation.do-overlay .slideout-exit {
    left: 0;
}

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

Let me know if this helps 🙂

[Danny]

That works on desktop, thank you. On mobile, it’s centered. Not a big deal but is there a way to align to the upper left like the hamburger menu?

[Leo]

Try this as well:

@media (max-width: 768px) {
    .slideout-navigation.do-overlay .slideout-exit {
        position: fixed;
        text-align: unset;
        left: 0;
        right: unset;
    }
}

Let me know 🙂

[Danny]

That didn’t work. It’s still centered and brought it closer to the first menu item.

[Leo]

Looks like it’s working to me?
https://www.screencast.com/t/AZ9IRpjmA5A

Is that not what you are seeing?

[Danny]

It seemingly works on the emulation apps for chrome but not on my actual iPhone. I am looking in safari incognito.

[Leo]

Can you try the edited CSS here?
https://generatepress.com/forums/topic/slide-out-menu-close-toggle/#post-1170949

[Danny]

I did, it’s not working. It’s in there now.

[Leo]

Tough to debug when I can’t see the error in browser inspect.

Can you give it another shot?
https://generatepress.com/forums/topic/slide-out-menu-close-toggle/#post-1170949

[Danny]

That did it, thank you!

[Leo]

No problem 🙂

[Author]

Posts