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

Home Forums Support [Resolved] Make Slideout Navigation appear from top instead from sides

Home Forums Support Make Slideout Navigation appear from top instead from sides

Viewing 15 posts - 1 through 15 (of 28 total)
  • Author
    Posts
  • #664995
    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

    GeneratePress 2.1.4
    GP Premium 1.7.2
    #665196
    David
    Staff
    Customer Support

    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.

    #667065
    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

    #667238
    David
    Staff
    Customer Support

    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 🙂

    #667243
    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

    #667251
    David
    Staff
    Customer Support

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

    #667292
    David
    Staff
    Customer Support

    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

    #667303
    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

    #667311
    David
    Staff
    Customer Support

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

    #667314
    Ivan Cazorla

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

    thanks,
    Ivan

    #667323
    Ivan Cazorla

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

    thanks!

    #667325
    Ivan Cazorla

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

    thanks,
    Ivan

    #667360
    David
    Staff
    Customer Support

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

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