[Support request] Full-width slideout navigation?

Home Forums Support [Support request] Full-width slideout navigation?

Home Forums Support Full-width slideout navigation?

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #572327
    Seb

    Hi there, I’m developing a site with a slideout navigation menu (coming in from the right) but would really like the popup to be the full width/height of the page (and with the links centred) rather than the small menu that comes in.

    I saw an earlier support reply (from last December) that suggested adding this:

    @media (min-width: 400px) {
        .slideout-navigation {
            width: 100%;
        }
    }

    … but all that does is cause the menu to permanently appear, albeit shifted over to the right by a few hundred pixels. I’m assuming something must also be needed to push the “hidden” state further off to the right, but I don’t know what I need to change to achieve this?

    Thanks!

    GeneratePress 2.1.1
    GP Premium 1.6.2
    #572347
    David
    Staff
    Customer Support

    Is this for mobile? If so then currently this is not an easy option as the background overlay has the exit button so if the nav is opened full screen there is no exit option available. If thats not a problem then we can look at some CSS

    Alternatively you can sort of fake it by making the slideout overlay color the same as the slideout navigation colors:

    .slideout-overlay {
        background-color: #aaa;
    }
    
    .offside-js--is-open .slideout-overlay {
        opacity: 1;
    }

    And if you need to change he exit button color:

    .slideout-exit {
    color: #000 !important;
    }
    #572350
    Seb

    It’s for desktop – and yes, good point about the exit button although that previous answer suggested adding a text link to the menu to close it, which I’m happy to do if that’s the only way around it!

    But yeah, it’s not so much mobile where it’s a problem as it is on desktop, where at the moment the max site width is 1400px so a small 265px (or whatever it is) menu isn’t really cutting it in terms of the desired effect 🙂

    #572357
    David
    Staff
    Customer Support
    #572362
    Seb

    Pretty much! Two more examples of the kind of thing I’m after:

    http://www.social-communications.co.uk/
    http://demos.themetrust.com/beckett/

    #572374
    David
    Staff
    Customer Support

    OK i have something similar here:

    https://block.assemblewp.com

    So you can use this CSS and then some of the above to format the overlay colors to match.

    @media (min-width: 768px) {
      .offside {
        left: 50%;
        margin-left: -132.5px;
        top: -100%;
      }	
      .offside.is-open {
        -webkit-transform: translate3d(0,100%, 0);
        -moz-transform: translate3d(0, 100%, 0);
        -ms-transform: translate3d(0, 100%, 0);
        -o-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0);
      }
    }
    #572378
    Seb

    That has absolutely nailed it! Thank you!

    #572381
    David
    Staff
    Customer Support

    Your welcome Seb glad i could help

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