Pinned Header Scrolls & Dissappears on Mobile

Discussion in 'General Muse' started by Meagan, Jan 5, 2017.

  1. Meagan

    Meagan New Member

    4
    0
    Hey everyone! I'm working on an extremely long website for a client (mobile version is close to 50,000px), and I'm running into an issue with a pinned header on Mobile. The header is a simple shape bar that is set to pin to the browser at top middle that sits behind a logo pinned to the browser at top left and a CTA button pinned to the browser at top right.

    The header works perfectly on desktop at all breakpoints, it's pinned to the top and stays stationary while all content scrolls below it. However, on mobile, the pinned header starts out pinned to the top as expected, but after scrolling about 2,000px down it slowly begins to drift up so it eventually leaves the page entirely at around 4,000px.

    I've tried to find anyone having a similiar problem but couldn't come across this specific issue. Any suggestions?
     
    Last edited: Jan 5, 2017
  2. DjHerold

    DjHerold Moderator Staff Member Advisory Group

    3,459
    255
    Meagan, that is a bit strange, at least I haven't run across something like that before.
    Let's try a couple of things, first, check your scroll effects panel (both the side panel and the scroll effects under the fill settings at the top).
    Any chance there are scroll effects (of course it would have to be a fixed BP) that are set accidentally?
    If not, then could we see a couple of screen shots that show the pinning selections.
    Thanks
    Dj
     
  3. Meagan

    Meagan New Member

    4
    0
    Hey Dj, thanks for the response! I agree, it is very strange. Below are a couple of screenshots ordered sequentially as I scrolled down farther through the site on my mobile device. Apologies for blurring the content and placing a box over the header logo, I'm under an NDA. Hopefully the issue still comes across. My hunch is that because the site is so long (50,000px on mobile) that it's just not able to keep the header pinned.

    Scrolling effects are turned off since I'm not using a single fixed breakpoint.
     

    Attached Files:

  4. Jeremei

    Jeremei Well-Known Member

    745
    97
    Pinning is not recommended in mobile phones, it can lead to unpredictable consequences. :(
     
  5. DjHerold

    DjHerold Moderator Staff Member Advisory Group

    3,459
    255
    Meagan, unfortunately hose pics don't show the Muse interface, pinning ect.
    Although I personally think that is far to much for a page size, I haven't run across that being a reason for pinning to act erratically.
    But this is Muse, and a page that long might cause issues.
    Dj
     
  6. Meagan

    Meagan New Member

    4
    0
    Hey DJ, sorry about that, I misread your previous post! Attached are shots of the pinned settings within Muse for each of the three header objects.
     

    Attached Files:

  7. DjHerold

    DjHerold Moderator Staff Member Advisory Group

    3,459
    255
    Meagan, I'm not seeing anything that jumps out at me, but I would normally suggest placing a support ticket (resources>contact us) and see if the team can look at your file. But you did state you have an NDA.
    You could eliminate the page length if you wanted to experiment a bit. Make a copy of your site, and start by removing any widgets one at a time and seeing if any widgets might be causing this. Next, start reducing the page size ad see if the shear length is having anything to do with it. At least down to say 7000 px.
    As Jeremei said, there are those that don't subscribe to pinning Mobile size break points.
    And lastly, try talking with Adobe and see if they know about this.
    Sorry
    Dj
     
  8. Jeremei

    Jeremei Well-Known Member

    745
    97
    I don´t use pinnning in mobile layouts and I have not had problems. This is not an issue of Muse! It is the issue of mobile browsers how they handle pinning. :)
     
  9. Meagan

    Meagan New Member

    4
    0
    Thanks all! Appreciate the responses. I'll try troubleshooting on my end and then reaching out to Adobe if all else fails.
     

Share This Page