Mobile menu effect - Support | Kriesi.at - Premium WordPress Themes

Viewing 8 posts - 1 through 8 (of 8 total)

Author

Posts

October 17, 2016 at 11:18 am #699883

Hey there, I hav the same question like in this post:
https://kriesi.at/support/topic/options-for-mobile-menu-display/

… the wonderful Kriesi wrote a code snippet. But this will not work. The mobile menu disapear completely! Even if I give the z-index a higher number.

Can you please help?

October 17, 2016 at 11:34 am #699888

Guenni007

Participant

it seems to be important to set the translate rules to important:

.show_mobile_menu #mobile-advanced{
-webkit-transform: 	translate(0, 100%)!important;
-moz-transform: 	translate(0, 100%)!important;
-ms-transform: 		translate(0, 100%)!important;
transform: 		translate(0, 100%)!important;
}

the Rest – you have to play a bit (f.e. to position the open and close buttons.

October 18, 2016 at 9:42 am #700501

Rikard

Keymaster

Hi,

Could you post a link to the site in question so that we can take a closer look please?

Thanks,
Rikard

October 19, 2016 at 12:29 pm #701217

Guenni007

Participant

it works on one of my testpages: http://webers-testseite.de/ikom

October 19, 2016 at 12:41 pm #701227

frankeee

Participant

Hey Guenni007,
thanks for your code snippet. But it doesn´t work for me!

I´ve found another snippet that will work:

html body#top #mobile-advanced {
    top: 0;
    left: auto;
    right: -100%;
    -moz-transform: none;
    -ms-transform: none;
    -webkit-transform: none;
    transform: none;
    transition: right 0.6s;
}
html body#top .show_mobile_menu #mobile-advanced {
    -moz-transform: none;
    -ms-transform: none;
    -webkit-transform: none;
    transform: none;
    right: 0;
}
 #mobile-advanced {
  background: #575b5e;
}
#mobile-advanced a {
    color: #fff;
    border-color: #777;
    text-transform: lowercase;
}

… the problem with this snippet: the menu displays from the right site and not from the top. Do you have an idea how to display the menu from top like in your testsite?

October 19, 2016 at 5:51 pm #701449

Guenni007

Participant

well it is Kriesies Code but with important on that part i mentioned:
So my comment was that you have to change in that kriesi code the one rule to !important setting

#mobile-advanced{
width:100%;
right:0;
position: absolute;
z-index: 1000;
top:-100%;
padding:89px 0;
overflow: hidden;
border-left-style: solid;
border-left-width: 1px;
margin:0 0 0 -2px;
-webkit-transform: 	scale(1);
-moz-transform: 	scale(1);
-ms-transform: 		scale(1);
transform: 			scale(1);
-webkit-transition: all 0.6s ease;
-moz-transition: 	all 0.6s ease;
transition: 		all 0.6s ease;
-webkit-transform-origin: 0% 0%;
-moz-transform-origin: 0% 0%;
-ms-transform-origin: 0% 0%;
transform-origin: 0% 0%;
display:none;
}

.csstransforms3d #mobile-advanced{
-webkit-transform: 	scale3d(1);
-moz-transform: 	scale3d(1);
transform: 			scale3d(1);
}

.show_mobile_menu #mobile-advanced{
-webkit-transform: 	translate(0, 100%)!important;
-moz-transform: 	translate(0, 100%)!important;
-ms-transform: 		translate(0, 100%)!important;
transform: 		translate(0, 100%)!important;
}

.csstransforms3d .show_mobile_menu #mobile-advanced{
-webkit-transform: 	translate3d(0, 100%, 0);
-moz-transform: 	translate3d(0, 100%, 0);
transform: 			translate3d(0, 100%, 0);
}