Mobile menu animation open from top to bottom - Support | Kriesi.at

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

Author

Posts
January 20, 2017 at 1:31 pm #736428

Dave
Participant

Hi Vinay,
Having tested the code you posted about the enfold mobile menu theme here: https://kriesi.at/support/topic/mobile-menu-animation-2/#post-708965

This works fine scrolling the menu up and down but if i change the orientation on the iphone whilst the menu is open I get strange results and the same occurs if you adjust the desktop browsers height by resizing your browser. This appears to move the open menu up or down depending on how you resize your browser. Do you know anything which could fix this issue please?

@dave
Please open your very own ticket in our forum.

@kilimats
Let us know if you still need help with this or not.

Best regards,
Andy

Hi Andy Yes i still require assistance thx.

January 24, 2017 at 9:11 am #737605

Ismael
Moderator

Hi Dave!

Thank you for using Enfold.

Could you please provide a link to the site? We would like to check it. A screenshot will help as well.

Best regards,
Ismael

January 25, 2017 at 1:24 pm #738334

Dave
Participant

Here’s is a screen grab showing the menu

Resize the browser to see this occur, which also occurs on mobile when orientation changes. i guess top -100% is the cause? any fix for this

I would just like the mobile menu start transition to scroll down from top to bottom

January 26, 2017 at 6:02 pm #739055
Dave
Participant
Any one Available at support to answer the question???? pretty quick to tell me to start a new thread but slow in answering, could of just answered the 1st post. I asked the question on the 18th Jan its now 26th!! is this the normal time frame to answer? or does it take longer?
- This reply was modified 7 years, 9 months ago by Dave.
January 26, 2017 at 6:08 pm #739059
Dave
Participant
Hi Ismael support has been pretty slow and im pretty disappointed with it can you please help with my query its been over a week to answer the question and i still don’t have anything other than start your own ticket and supply screen shot.
- This reply was modified 7 years, 9 months ago by Dave.
January 26, 2017 at 10:10 pm #739138

Basilis
Inactive Moderator

Hey!

When you post inside a message, you drop it back to the end of the que, and we are avaible to help.
If you change the orientation, you have to close and reopen, for the sizes to get properly.
That is how it works, as that is how transform works as a CSS rule. You can not generally speaking, see any effects, just because you changed orientation.

Let us know if we can help you with anything else.

Regards,
Basilis

January 27, 2017 at 11:25 am #739312

Dave
Participant

What? sorry can you explain what needs to be done to resolve this, If the user opens the menu and then changes the orientation or resizes the browser while menu open the menu breaks. i’m looking for a fix and don’t fully understand what your fix is?.

January 31, 2017 at 5:14 pm #740762
Yigit
Keymaster
Hi,

Sorry for the late reply Dave. Forum is currently very busy but we will fix that as soon as possible.

That being said, please post us your login credentials (in the “private data” field), so we can take a look at your backend.

Login credentials include:
- The URL to the login screen.
- A valid username (with full administration capabilities).
- As well as a password for that username.
- permission to deactivate plugins if necessary.
Best regards,
Yigit
January 31, 2017 at 5:30 pm #740776

Dave
Participant

Hi Yigit,
Please find the details below to login. This site is currently under development in a test server.
The menu works fine if i open and close in the same screen size desktop and mobile but any kind of browser orientation change or browser resize you will see the open menu break. i only have 2 plugins but if you need to deactivate them please do so

February 6, 2017 at 4:29 am #743114
Ismael
Moderator
Hi,

Thank you for the info and patience.

We modified the code in the Quick CSS field and then added the following script in the functions.php file.
```
function ava_mobile_menu(){
?>
<script>
(function($){
	$(window).on("resize orientationchange", function() {
		var wrap = $('#wrap_all');
		if(wrap.hasClass('show_mobile_menu')) {
		      wrap.removeClass('show_mobile_menu');
		}	
	});
})(jQuery);
</script>
<?php
}
add_action('wp_footer', 'ava_mobile_menu');
```
This is the new css modification.
```
#wrap_all {
    position: relative;
}

#mobile-advanced {
    right: 0;
    top: -100%; /* set the mobile menu position */
    -webkit-transform-origin: 100% 0;
    -moz-transform-origin: 100% 0;
    -ms-transform-origin: 100% 0;
    transform-origin: 100% 0;
}

.avia_transform3d .show_mobile_menu #mobile-advanced {
    -webkit-transform: 	translate3d(0, 100%, 0);
    -moz-transform: 	translate3d(0, 100%, 0);
    transform: 			translate3d(0, 100%, 0); /* on transition, pull down the mobile menu container */
}

.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;
}
```
Best regards,
Ismael
February 6, 2017 at 12:31 pm #743309

Dave
Participant

Hi Ismael,
Thank you, this is much appreciated. I still have one issue though with the menu in landscape orientation on the mobile as it drops or animates too far down the page any ideas what could cause this please?
(i was testing it on the iphone in landscape orientation)

February 7, 2017 at 12:26 pm #743854
Ismael
Moderator
Hi!

Do you have an iPhone 6? Please add this css code.
```
@media only screen 
and (min-device-width : 375px) 
and (max-device-width : 667px) 
and (orientation : landscape) { 
    #mobile-advanced { margin-top: -11%; }
}
```
Best regards,
Ismael
February 10, 2017 at 8:13 pm #745570

Dave
Participant

Hi Guys,
Thanks for all the help it is much appreciated however i have noticed that if the user changes the browser or phone orientation then the menu does remove which is what i want however the page is still in the menu mode meaning you cant now scroll down the page any more until the user opens and closes the menu again. would you know how to now make the page go back to normal if the menu is removed on orientation change/browser resize?

February 17, 2017 at 11:03 am #748325

Ismael
Moderator

Hi!

Did you remove the latest modification? We updated the css code above. Please try it again.

// https://kriesi.at/support/topic/mobile-menu-animation-open-from-top-to-bottom/#post-743114

Regards,
Ismael
Author

Posts

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

You must be logged in to reply to this topic.