Tagged: , , ,

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #809882

    Hello Kriesi-Team,

    im struggling with my sticky header. When i use anchors on my page the content will go straight to the top of the browser. The problem is that my sticky header then will cover the content (f.e. first headline). This problem only appears on the ipad. Android Devices seems to be fine.

    Please have a look at it, maybe youll find a way out ;)

    Thank your for your great lively support!

    Stephan

    #811217

    Hey EFESQU,

    Can you give us more details what browser on mobile, mobile browser etc?
    Thank you

    Best regards,
    Basilis

    #811233

    Hey Basilis,
    thanks for getting into it. Its the Safari Browser on the Ipad which causes the issue.

    Best

    Stephan

    #812269

    Hi,

    I tested with my iPhone, can u test with your mobile phone and let us know what issues exist please?

    Best regards,
    Basilis

    #812327

    The issue is only visible on ipads. Android, OSX and Windows is working fine.
    The Issue is mentioned above in the first post. If you use a anchor link or the “scroll-down” of the sliders the page will match the given anchor link the the top of the page and ignore the sticky header. The result is that the first headline or content will be hidden behind the sticky header. But again, only on the ipad. This was not a issue with older versions of enfold.

    Thanks for your help.

    #812567

    Hi,
    Try adding a class to the anchor element with a offset height as the padding-top value.
    The anchor link:

    <a class="anchor" name="one">Link One</a>

    The css:

    .anchor {
      display: block!important; 
      height: 100px!important;
      margin-top: -100px!important;
      visibility: hidden;
    }

    Or
    perhaps a plugin: https://wordpress.org/plugins/hash-link-scroll-offset/

    Best regards,
    Mike

    #815199

    Hallo Mike,

    i i tried your anchor solution but the problem is that the page works fine besides the ipad-problem. if i add the anchor css above, it will add on top of the existing offset. I end up having a double height. The suggested plugin has no effect on the page :-(

    I have no idea why apple is executing the code differently than other browsers…

    Best,

    #815534

    Hi,
    Sorry, I see this a lot, apple often uses non standard user agent code, but to be fair, Chrome, Edge, Firefox, & Safari treat css just a little different from each other, but mostly we can’t see it.
    Anyways, lets try only targeting iPads :)
    iPad 3 & 4 Media Queries
    Retina iPad in portrait & landscape

    @media only screen 
    and (min-device-width : 768px) 
    and (max-device-width : 1024px)
    and (-webkit-min-device-pixel-ratio: 2) { .anchor {
      display: block!important; 
      height: 100px!important;
      margin-top: -100px!important;
      visibility: hidden;
    }}

    Didn’t work? Here’s the full apple list :) http://stephen.io/mediaqueries/

    Best regards,
    Mike

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