Tagged: , ,

Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • January 2, 2018 at 11:16 pm #892634
    chopsuey750

    Hello, I’m successfully using smooth scrolling on desktop and mobile. The only problem is on mobile it goes to the bottom of the color section instead of the top. Therefore, half of the text in the color section is hidden. Please advise on how to ensure it scrolls to the top of the color section on mobile devices.

    Thank you,
    Sue

    January 3, 2018 at 7:24 am #892749
    John Torvik

    Hey chopsuey750,

    Please, share your WP credentials.

    Best regards,
    John Torvik

    January 3, 2018 at 9:34 pm #892924
    chopsuey750

    Hi John, I determined the cause is this CSS I put in place to ensure the burger menu appears at the top of the page on mobile devices. If I take it out, the smooth scrolling works but the menu disappears. Login credentials provided below.

    /*fix menu & header on mobile*/
    .responsive #top #header {
    position: fixed !important;
    }

    January 3, 2018 at 11:17 pm #892956
    Jordan Shannon

    Hi,

    The smooth scroll seems to be working for me. Can you add the code which breaks it back in?

    Best regards,
    Jordan Shannon

    January 4, 2018 at 1:03 am #893011
    chopsuey750

    Hi Jordan, the code is already there. Are you testing it on a phone? It should take me to the top of the color section, instead it takes you to the middle and cuts off text.

    If you test it on a phone and a desktop you will see the difference. The desired behavior is what you see on the desktop.

    Thank you,
    Sue

    January 7, 2018 at 10:47 pm #894527
    Basilis

    Hi,

    I also see it working properly on mobile.
    Are you sure you seen a clear with no cache page?

    Thank you

    Best regards,
    Basilis

    January 7, 2018 at 11:55 pm #894533
    chopsuey750

    Hi, would you please provide a screen shot of what you’re seeing on mobile when you click on a menu item? Are you seeing all of the text in the yellow color sections for each menu item?

    January 9, 2018 at 6:19 am #895102
    Ismael

    Hi,

    It’s not working properly because the header is set to “fixed”. The header height is not included in the anchor offset calculation. Please remove the following css code.

    .responsive #top #header {
    position: fixed !important;
}

    Sticky or fixed header is not recommended on smaller screens because of the limited screen space. Users can double tap on the top edge of the screen if they want to go back to the header if that’s what you’re worried about.

    Best regards,
    Ismael

    January 12, 2018 at 7:32 pm #896654
    chopsuey750

    Hi, the problem is when I take that code out the menu disappears as well. How can I fix that?

    Thank you,
    Sue

    January 13, 2018 at 5:18 am #896822
    Ismael

    Hi,

    The header is still working properly on mobile and desktop when I removed the css code. Please remove browser cache or hard refresh before checking the page.

    Best regards,
    Ismael

    January 13, 2018 at 5:26 am #896831
    chopsuey750

    Hi Ismael, I did clear the cache, but when I scroll down on the page the burger menu no longer appears at the top right. I would like the burger menu to remain visible. How do I fix that?

    January 13, 2018 at 5:34 am #896835
    Ismael

    Hi,

    The mobile menu is inside the header and since the header is no longer sticky or fixed, you won’t see the mobile menu fixed on scroll. Again, users can double tap at the top edge of their mobile device if they want to go back to the navigation. You don’t need to make the header or the mobile menu “sticky” on any mobile device.

    Best regards,
    Ismael

    January 13, 2018 at 5:52 am #896839
    chopsuey750

    Hi Ismael, I have seen other enfold sites where the burger menu is always displayed in the top right corner. I understand users can double tap at the top edge, but I’d prefer the menu to remain visible. I would like to do that as well. Would you please help me accomplish this with custom CSS?

    Thank you,
    Suse

    January 15, 2018 at 3:22 am #897316
    Ismael

    Hi,

    Please use the following css codes.

    @media only screen and (max-width: 767px) {
    .responsive #top .av-main-nav .menu-item-avia-special {
        position: fixed;
        right: 30px;
    }
}

    Best regards,
    Ismael

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