-
AuthorPosts
-
June 19, 2017 at 5:24 pm #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
June 21, 2017 at 11:14 pm #811217Hey EFESQU,
Can you give us more details what browser on mobile, mobile browser etc?
Thank youBest regards,
BasilisJune 21, 2017 at 11:34 pm #811233Hey 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 #812269Hi,
I tested with my iPhone, can u test with your mobile phone and let us know what issues exist please?
Best regards,
BasilisJune 23, 2017 at 11:02 pm #812327The 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 #812567Hi,
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,
MikeJune 30, 2017 at 10:27 pm #815199Hallo 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 #815534Hi,
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 -
AuthorPosts
- You must be logged in to reply to this topic.