Make Slideout Navigation appear from top instead from sides

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.

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

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 :)

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

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

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

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

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

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.....

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

thanks,
Ivan

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

thanks!

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

thanks,
Ivan

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

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