Tagged: , , ,

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • June 19, 2017 at 5:24 pm #809882
    EFESQU

    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

    June 21, 2017 at 11:14 pm #811217
    Basilis

    Hey EFESQU,

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

    Best regards,
    Basilis

    June 21, 2017 at 11:34 pm #811233
    EFESQU

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

    Best

    Stephan

    June 23, 2017 at 7:28 pm #812269
    Basilis

    Hi,

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

    Best regards,
    Basilis

    June 23, 2017 at 11:02 pm #812327
    EFESQU

    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.

    June 25, 2017 at 12:00 am #812567
    Mike

    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

    June 30, 2017 at 10:27 pm #815199
    EFESQU

    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,

    July 2, 2017 at 1:25 pm #815534
    Mike

    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

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