New Landing › How can we help? › Themeforest Theme Support › Uplift › Push Nav to Fade-In instead of sliding from right

Viewing 8 posts - 1 through 8 (of 8 total)
  • Back to forum
    Posted in: Uplift
  • June 26, 2016 at 11:08 am #277201
    wademd
    Member
    Post count: 37

    Thanks for all the help you have provided me in the past. I have another question for you.

    My client requires the full-screen push navigation to fade in instead of sliding from the right. I was wondering if I could get some assistance as to what to change the CSS to. Im guessing I need to change “.sf-pushnav” class but whatever I google on the net for fade in information doesnt seem to work when I test out in code-inspector.

    Thank you again for any help you can provide.

    W

    June 27, 2016 at 9:46 pm #277553
    Rui Guerreiro – SUPPORT
    Keymaster
    Post count: 25779

    Hi,

    Can you try to change the menu display type. Go to Theme options-> Mobile header options->
    https://www.dropbox.com/s/mmdsmi6t1opoz18/Screenshot%202016-06-27%2018.37.50.png?dl=0

    To see if that’s what you need.

    -Rui

    June 28, 2016 at 1:45 pm #277750
    wademd
    Member
    Post count: 37

    Hi Rui,

    Thanks for the reply back. That was for mobile but actually it was already set to that. And changing it to slide and then back to overlay again didn’t change anything. Is there css I can override? I think I found the right class to change but doing a web search I cant seem to find the right css code to override or an option without additional javascript to add.

    I know TranslateX code is calling out the slide.

    This is the CSS i see in code inspector:

    .sf-pushnav {
    position: fixed;
    z-index: 999;
    left: auto;
    top: 0;
    right: 0;
    height: 100%;
    width: 100%;
    background-color: #243040;
    color: #fff;
    visibility: visible;
    -webkit-transform: translateX(100%);
    -moz-transform: translateX(100%);
    -ms-transform: translateX(100%);
    -o-transform: translateX(100%);
    transform: translateX(100%);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transition: -webkit-transform 0.7s;
    -moz-transition: -moz-transform 0.7s;
    transition: transform 0.7s;
    -webkit-transition-timing-function: cubic-bezier(0.91, 0.01, 0.6, 0.99);
    -moz-transition-timing-function: cubic-bezier(0.91, 0.01, 0.6, 0.99);
    transition-timing-function: cubic-bezier(0.91, 0.01, 0.6, 0.99);
    }

    June 29, 2016 at 1:57 pm #278089
    Rui Guerreiro – SUPPORT
    Keymaster
    Post count: 25779

    Hi,

    I’m not sure about the proper css to achieve it.
    Will forward it to our head developer.

    -Rui

    June 30, 2016 at 1:53 am #278251
    wademd
    Member
    Post count: 37

    I found a way to do it… I ended up using the translateX to 0 so that way to was at the starting point and then changed the opacity to 0. Since it was still sitting on top I changed the z-index to -999 but then for the open state I put the z-index back to 999 and did a ease-in transition with 1.25s and that seemed to work.

    If you can make the fade transition part of the theme that would be awesome but this is the workaround I did that appears to work.

    .sf-pushnav-is-open .sf-pushnav {
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -o-transform: translateX(0);
    transform: translateX(0);
    z-index: 999;
    -webkit-opacity: 1.0;
    -moz-opacity: 1.0;
    opacity: 1.0;
    -webkit-transition: all 1.25s ease;
    -moz-transition: all 1.25s ease;
    -ms-transition: all 1.25s ease;
    -o-transition: all 1.25s ease;
    transition: all 1.25s ease;
    }

    .sf-pushnav {
    z-index: -999;
    -webkit-opacity: 0;
    -moz-opacity: 0;
    opacity: 0;
    -webkit-transition: all 1.25s ease!important;
    -moz-transition: all 1.25s ease!important;
    -ms-transition: all 1.25s ease!important;
    -o-transition: all 1.25s ease!important;
    transition: all 1.25s ease!important;
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -o-transform: translateX(0);
    transform: translateX(0);
    }

    Hope that helps anyone interested in doing the same.

    June 30, 2016 at 2:12 pm #278406
    Rui Guerreiro – SUPPORT
    Keymaster
    Post count: 25779

    Great. Glad you manage to sort it.
    Thanks for sharing.

    -Rui

    June 30, 2016 at 5:04 pm #278469
    wademd
    Member
    Post count: 37

    You’re welcome.

    June 30, 2016 at 5:44 pm #278479
    Rui Guerreiro – SUPPORT
    Keymaster
    Post count: 25779

    🙂

  • Back to forum
    Posted in: Uplift
Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.