[Resolved] Make Slideout Navigation appear from top instead from sides

[Ivan Cazorla]

Hi there, is it possible to make that the Slideout navigation appear from the top to bottom and cover the entire screen instead from appearing from one of both left and right sides? Something similar (without the animation) as what Apple website does: https://www.apple.com/es/

Thanks,
Ivan

[David]

Hi Ivan

does it have to be as flash as the Apple one? As that would take some serious custom coding or a plugin. Making the current slideout fill the screen is doable, as well as slide in from the top but it would cover the current header. Let me know.

[Ivan Cazorla]

Hi there, no, it doesn’t have to be exactly the same as the Apple one, just the animation to be from top to bottom instead of right to left. I guess we could leave some margin on top of the slideout in order to not cover the header.

Let me know. Thanks,
Ivan

[David]

Hi there, so lets give this a go:

@media (max-width: 768px) {
    .main-navigation.offside {
        width: 100%;
        top: calc( -150%);
        left: 0;
    }
    .main-navigation.offside.is-open {
        -webkit-transform: translate3d(0, calc( 150% + 40px), 0);
        transform: translate3d(0, calc( 150% + 40px), 0);
    }
}

If it works then next we can deal with the missing exit button 🙂

[Ivan Cazorla]

Hi, it works for now. As for the exit button, I disabled it by my own, do you want me to enable it?

thanks,
Ivan

[David]

How about this. Create a new menu item just give it a # URL and this nav label:

<button class="slideout-exit"><span class="screen-reader-text">Close</span></button>

Then this CSS:

.slide-opened .slideout-exit:before {
	font-family: GeneratePress;
}
button.slideout-exit {
	position: relative;
	padding: 0;
}

[Ivan Cazorla]

That looks great but only the X is clickable, not the entire line padding. Is it possible that when the menu open the header background becomes white and the X replaces the menu icon on the top right?

thanks,
Ivan

[David]

That would require custom development…..

Alternatively you could hook in your own slideout nav header using Elements. Look for the inside_slideout_navigation hook, you can put what you like in there and style it to look like the current header. Let me know

[Ivan Cazorla]

Alright, that makes sense. One problem with the code you gave me is that in Chrome is working great, but in Safari the top position is bigger compared to Chrome. Can we fix that?

thanks,
Ivan

[David]

Yeah that is one of the bugbears with repositioning it like that especially for browsers that display at different resolutions and default zoom size. I think its why i stopped plating with it lol

If you go down the header route, then removing the +40px offset should keep it in place…..

[Ivan Cazorla]

Hi again, yeah it keeps it in place but only in google chrome. Kinda weird.

thanks,
Ivan

[Ivan Cazorla]

Hi again, it works now, it was because of the Offset Site Header Height.

thanks!

[Ivan Cazorla]

Can we center just the X and make all the space clickable? That would make it perfect.

thanks,
Ivan

[David]

So try this instead:

Menu label:

<span class="screen-reader-text">Close</span>

Menu Classes to:

slideout-exit custom-slideout-exit

CSS:

.slide-opened .slideout-exit:before {
    display: none;
}

.custom-slideout-exit a {
    text-align: center;
}

.custom-slideout-exit a:before {
    content: "\f00d";
    font-family: GeneratePress;
    line-height: 1em;
    width: 1.28571429em;
    text-align: center;
    display: inline-block;
}

[Ivan Cazorla]

Sweet! The only thing now is that the top space that I fixed by myself on Safari doesn’t work on Safari on an iPhone, but it works on my macbook. Do you know why o what we could do to fix that? Is it really possible?

By the way, the X toggle appears on desktop too. Can we get rid of that?

thanks,
Ivan

[Author]

Posts