Spacious - off canvas menu close X disappeared

Hi there,

Don't think I'm seeing the issue on desktop or mobile:
https://www.screencast.com/t/O59j5bevFF0V
https://www.screencast.com/t/7b7HR7D9NE

Anything specific I need to do?

Let me know :)

Why is it on the right? Check in Safari too, it's not showing there.

And it's in a different place in Firefox! :D

Something's messed up somewhere, but I'm having trouble finding where!

Hi there,

this is due to the way browsers interpret the postition: fixed; CSS property - according to the CSS rule book a position: fixed element should position itself relative to the viewport in this case the very top right hand corner, which is what Safari and Firefox are doing.

Chrome does it differently. So we could try this but not 100% sure (lol). Find this CSS in Customizer > Additional CSS:

.slide-opened .main-navigation.offside {
    transform: initial;
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    z-index: 100 !important;
}

Change the position: fixed; to position: absolute;

Then add this CSS rule:

.slideout-navigation .inside-navigation {
    position: static;
}

May need some tweaking

That didn't help and moved the X to the top of the screen. Seems this is a bug. Any chances of a more permanent fix? :)

The Site was never designed to have a full screen nav, and with the current right hand fixed position of the Exit toggle we're battling the way the different browsers handle fixed positions. So if we let the exit button position itself naturally over the menu we can try this.

1. Remove this CSS:

.slide-opened .main-navigation.offside {
    transform: initial;
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    z-index: 100 !important;
}

2. Add this CSS:

.main-navigation.offside {
    transform: initial;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
}

.slideout-navigation.do-overlay .slideout-exit {
    position: initial;
}

.slideout-navigation.do-overlay .inside-navigation {
    padding: 0;
    max-width: 100%;
}

.slideout-navigation .main-nav {
    padding-top: 10%;
}

@media (max-width: 768px) {
    .slideout-navigation.do-overlay .slideout-exit {
        text-align: left;
        font-size: 18px;
    }
}

Perfect, thank you so much! Appreciate it. :)

Phew .... glad to hear that and happy to be of help.