-
AuthorPosts
-
February 25, 2016 at 1:14 am #588703
Two Issues :
1) I adjusted the CSS according to other posts here to make the mobile menu sticky adding :
@media only screen and (max-width: 767px) { .responsive #top #header { position: fixed !important; background-color: #30373b !important; } }
However, now when I click on the menu on my mobile or tablet, both the logo and the menu inexplicably “jump” to the right, then back
2) My content is being partially covered by the menu bar on mobile now.
February 25, 2016 at 7:57 pm #589419Hey Michae1!
Please share the link to the page where we can see the element in question so we can help you better :)
Remove the custom CSS you have added and create a mockup of how you need the end result to look like and share with us a temporary admin access in private content with permission to deactivate all plugins and add custom code if necessary to help you better.
Regards,
Vinay KashyapFebruary 25, 2016 at 8:56 pm #589446Thanx Vinay,
Here is the link. I can’t mockup the issue because it’s an interactive one, not static. But if you look at it on your phone and click the menu icon (lines) you’ll see what I mean. The logo jumps to the right for some reason, and then back again when you close it.
February 26, 2016 at 12:18 am #589533Here’s a screencast of the issue from my phone.
March 2, 2016 at 4:02 pm #592137Hey!
Sorry for the delay.
We are working on your ticket please wait while we update the results here soon.Looks like you have sorted out the fixed mobile menu issue… The logo jumps to the right because the scroll bar is deactivated when you click the menu…
To resolve this make the mobile menu container 100% wide and add some padding to the logo to left and some margin to the menu buttons.
Use the below css in Enfold > General Styling > Quick CSS
/* mobile menu adjustments */ @media only screen and (max-width: 767px) { .responsive #top #wrap_all .container { width: 100%!important; max-width: 100%!important; padding-left: 20px!important; } #top #wrap_all .av_header_transparency, .av_header_transparency #advanced_menu_toggle { margin-right: 20px!important; } }
Best regards,
Vinay Kashyap- This reply was modified 8 years, 8 months ago by Vinay.
May 4, 2016 at 7:04 am #626924Hi Vinay,
That ALMOST works :) It keeps the menu from jumping, but now when you scroll down the hamburger/menu lines animate to the right. Wasn’t sure where else to put the margin-right setting to keep it from doing that. Thoughts?
May 6, 2016 at 8:34 am #628170Hi,
It moves to the right because of the “av_header_transparency” class attribute is being removed when you scroll down. Try to replace the code with the following:
@media only screen and (max-width: 767px) { .responsive #top #wrap_all .container { width: 100%!important; max-width: 100%!important; padding-left: 20px!important; } #top #wrap_all #advanced_menu_toggle { margin-right: 20px!important; } }
Best regards,
IsmaelMay 8, 2016 at 9:30 pm #628914Ismael,
Thanx! Got that problem solved. But now another bigger one popped up :(
When viewing on an actual mobile device (not just small browser window size) and you click on any of the mobile menu links, two bad things happen :
- Menu Un-Sticks
- Mobile Menu Disappears Entirely
Super important to fix this one sooner than later. Included login info.
Thoughts?
May 8, 2016 at 9:33 pm #628915A third issue I’m noticing is that the right border / centering of everything with the content is slightly off. Scroll down to pricing on your phone and you’ll see what I mean. Less of an issue than the first two, but would still like to solve it.
Thanx!
May 10, 2016 at 5:53 pm #630147Hi,
would be best for this forum to open separate tickets for different questions.
Please deactivate all plugins one by one to check which one is causing this issue and let us know if this solves the problem.
In addition to that, please let us know if we are allowed to deactivate one or more of your plugins as well for testing purposes :)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
Best regards,
AndyMay 10, 2016 at 9:49 pm #630251Hi,
It didn’t solve anything. I included the credentials. Please let me know. Thanx!
~ Michael
May 12, 2016 at 9:21 am #631232Hi,
Do you mind posting a screenshot of the issue? I checked the site on my iPod Touch and the mobile menu do not disappear once I clicked on any links.
Best regards,
IsmaelMay 12, 2016 at 9:54 am #631244Posted screencast below.
May 14, 2016 at 9:24 am #632305Hi,
The code that we suggested affects all containers. Please replace it with:
@media only screen and (max-width: 767px) { .responsive #top #wrap_all #header_main .container { width: 100%!important; max-width: 100%!important; padding-left: 20px!important; } #top #wrap_all #advanced_menu_toggle { margin-right: 20px!important; } }
I can’t seem to reproduce the issue on my end and based from the codes that we suggested previously, I can’t see any reason why it will disappear on scroll. What happens if you disable the css modifications?
Best regards,
IsmaelMay 15, 2016 at 1:53 am #632411That fixed the container issue. Thanx!
The other bigger is still there. It doesn’t disappear on scroll, it disappears after you click one of the menu items. For example, click Pricing, and it scrolls to the anchor point of pricing (that’s good) but the menu is no longer sticking to the top of the screen on mobile (that’s bad) and the mobile hamburger menu disappears (also very bad).
If I disable all the CSS mods then the menu clicking works, but the sticky menu on mobile is disabled (which is a CSS mod too).
Thoughts?
May 17, 2016 at 6:12 am #633489Hi,
I’m not sure what could be causing that. The sticky header is disabled on mobile by default because setting the position of elements to “fixed” causes issues on mobile devices. Quote from one of the articles around the web:
Web designers are used to fixing elements to the window using CSS’s position: fixed, however, in the land of mobile browsers, support for fixed positioning is far less universal and is way more quirky.
And on a few experiments, these are the observations:
Mobile Safari – iOS5 and after has strong support for fixed positioning. iOS4 and below simply treats elements as static and scrolls them along with the rest of the page.
Firefox Mobile – Supports fixed positioning as of 6.0 (many thanks to @alex_gibson for testing this). On older versions, fixed positioned elements scroll with page and then awkwardly snap back into position once scrolling is complete.
Opera Mobile – Fixed positioned elements scroll with page and then awkwardly snap back into position once scrolling is complete. WTF bug: Opera miscalculates positioning and awkwardly places fixed headers further down the page.
You should consider disabling the sticky header on mobile.
Best regards,
IsmaelJuly 7, 2016 at 3:01 am #657819Hi all,
I’d like to add something to this thread. The code above solved “jump” issue. Thanks! I would like to add something else though.
When you click the mobile menu, the content jumps to the top as if you click “back to top” link. So if I’ve scrolled half way down and click the mobile menu, it will take me back to the top of the content.
Is there a solution for this somewhere here?
Thanks!
July 9, 2016 at 3:46 am #658685Hi,
You can disable that behaviour but you have to modify the js > avia.js file which is a script file that can’t be modified in a child theme. You have to repeat the modification every time you update the theme. If you’re still interested, edit the file then look for this code around line 464:
win.scrollTop(0); mobile_advanced.css({display:'block'});
Remove this line:
win.scrollTop(0);
Best regards,
IsmaelJuly 10, 2016 at 4:18 am #658886Ismael,
Thanks! I’ll consider it. I made use of the mobile menu on desktop as well and it works great. You guys should consider removing this from the avia.js for the future release so it’s not an issue.
Thanks,
Leyden
July 11, 2016 at 3:59 pm #659380 -
AuthorPosts
- You must be logged in to reply to this topic.