[Support request] Full-width slideout navigation?

[Creative]

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!

[David]

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;
}

[Creative]

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 🙂

[David]

Something like this:

https://agenc.assemblewp.com

[Creative]

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

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

[David]

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);
  }
}

[Creative]

That has absolutely nailed it! Thank you!

[David]

Your welcome Seb glad i could help

[Author]

Posts