Push Nav to Fade-In instead of sliding from right

[wademd]

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

[Rui Guerreiro – SUPPORT]

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

[wademd]

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

[Rui Guerreiro – SUPPORT]

Hi,

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

-Rui

[wademd]

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.

[Rui Guerreiro – SUPPORT]

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

-Rui

[wademd]

You’re welcome.

[Rui Guerreiro – SUPPORT]

🙂