[Support request] Spacious – off canvas menu close X disappeared

Home Forums Support Spacious – off canvas menu close X disappeared

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #938995
    Tom

    What would cause the off canvas X to no longer show up?

    #939000
    Leo
    Staff
    Customer Support

    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 🙂

    #939001
    Tom

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

    #939002
    Tom

    And it’s in a different place in Firefox! 😀

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

    #939342
    David
    Staff
    Customer Support

    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

    #941074
    Tom

    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? 🙂

    #941101
    David
    Staff
    Customer Support

    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;
        }
    }
    #941112
    Tom

    Perfect, thank you so much! Appreciate it. 🙂

    #941114
    David
    Staff
    Customer Support

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

Viewing 9 posts - 1 through 9 (of 9 total)
  • You must be logged in to reply to this topic.