Tagged: , ,

Viewing 20 posts - 1 through 20 (of 20 total)
  • Author
    Posts
  • February 25, 2016 at 1:14 am #588703
    Michae1

    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 #589419
    Vinay

    Hey 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 Kashyap

    February 25, 2016 at 8:56 pm #589446
    Michae1

    Thanx 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 #589533
    Michae1

    Here’s a screencast of the issue from my phone.

    March 2, 2016 at 4:02 pm #592137
    Vinay

    Hey!

    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 #626924
    Michae1

    Hi 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 #628170
    Ismael

    Hi,

    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,
    Ismael

    May 8, 2016 at 9:30 pm #628914
    Michae1

    Ismael,

    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 #628915
    Michae1

    A 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 #630147
    Andy

    Hi,

    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,
    Andy

    May 10, 2016 at 9:49 pm #630251
    Michae1

    Hi,

    It didn’t solve anything. I included the credentials. Please let me know. Thanx!

    ~ Michael

    May 12, 2016 at 9:21 am #631232
    Ismael

    Hi,

    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,
    Ismael

    May 12, 2016 at 9:54 am #631244
    Michae1

    Posted screencast below.

    May 14, 2016 at 9:24 am #632305
    Ismael

    Hi,

    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,
    Ismael

    May 15, 2016 at 1:53 am #632411
    Michae1

    That 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 #633489
    Ismael

    Hi,

    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,
    Ismael

    July 7, 2016 at 3:01 am #657819
    fulanoinc

    Hi 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 #658685
    Ismael

    Hi,

    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,
    Ismael

    July 10, 2016 at 4:18 am #658886
    fulanoinc

    Ismael,

    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
    Rikard

    Hi Leyden,

    Thanks for the feedback, we’ll have a look if it’s something we can remove in future releases.

    Regards,
    Rikard

  • Author
    Posts
Viewing 20 posts - 1 through 20 (of 20 total)
  • You must be logged in to reply to this topic.