-
Posts
-
My anchor links on mobil always jump to the wrong position on the page “Relocation Services” If you click the “Wohnungssuche” or “Einleben” in the menue you jump on the mobile devices allways deeper than the Anchor is set. And it depend on the diffrent Devices. What can I do?
Hey Jacky,
Thanks for the login details. Could you try updating the theme to the latest version (4.4.1) to see if that helps please? https://kriesi.at/documentation/enfold/how-to-install-enfold-theme/#theme-update
Best regards,
RikardHello,
I’ve now read a lot of entries re this topic.
I’m working on a page and have the same (for me so far un-solvable) problem: The anchor links (all absolute in the menu) work fine on the homepage, but from the sub pages not all of those links are precisely hitting the correct position.
Please, can you help me?
Thanks.Hi,
@pkubalek: Where are you testing it? We can’t reproduce the issue on an iPhone 7 emulation.Best regards,
IsmaelIt didn’t work in the described way on an iPhone 5, an 8 and an Xr (actual phones, not an emulation).
Best,
PaulHi,
Thank you for the update.
You can try to adjust the scroll offset value, but this adjustment will also affect the desktop view.
add_filter('avf_header_setting_filter', 'avf_header_setting_filter_mod', 9999, 1); function avf_header_setting_filter_mod($header) { $header['header_scroll_offset'] = $header['header_scroll_offset'] + 48; return $header; }Best regards,
IsmaelEnfold always had this issue. In Kriesi Enfold One Page Restaurant Demo this problem is there. It works fine in desktops but when i open the website in my Ipad, the issue occurs. I think it’s related with the sticky header. When the sticky header is active, the problem is there. And the wrong height value is exactly the menu height. Very strange and i don’t know why Kriesi moderators can’t see this issue. Instead of using emulators, use a real Ipad or mobile and test the Enfold One Page Restaurant Demo and the anchor links.
I still need a solution too…
Hi,
Thank you for the update.
Have you tried using the filter above to adjust the scroll position? We could add the wp_is_mobile function so that it will only affect mobile screens including iPads.
function avf_header_setting_filter_mod($header) { if(!wp_is_mobile()) return; $header['header_scroll_offset'] = $header['header_scroll_offset'] + 48; return $header; } add_filter('avf_header_setting_filter', 'avf_header_setting_filter_mod', 9999, 1);Best regards,
IsmaelDear Kriesi-Team,
I am experiencing the same issue as found in some other posts, but I do not manage to find the right answer for my case. Hope you can help me!
On larger screens, Desktops & Tablets in landscape (min-width: 991px), I use the full-width menu, incl. sticky header. On one page I use anchor links as menu items. The positioning on Desktops and Phones was not perfect (i.e. heading to close to sticky header (Desktop) or browser-URL (Phone)), so I used the separator line above the heading as anchor point. This is for now satisfying.
However, these anchor links disappear behind the sticky header on Tablets in landscape (max-width: 1366px).
I noticed that probably the scroll offset value for Tablets in landscape should be changed. I don’t know which code should be placed where. I will give you access to the website in the private content.
Thank you so much for your help!
Best regards, CornelieHi,
Thank you for the inquiry.
You can use this filter in the functions.php file to adjust the offset value on mobile view. Decreasing the offset value should limit the scroll position and prevent the sticky header from covering the headings.
function avf_header_setting_filter_mod($header) { if(wp_is_mobile()) { $header['header_scroll_offset'] = $header['header_scroll_offset'] - 48; } return $header; } add_filter('avf_header_setting_filter', 'avf_header_setting_filter_mod', 9999, 1);Make sure to purge the cache or check the site on incognito mode after applying the filter.
Best regards,
IsmaelDear Ismael,
thanks for you quick reply. Unfortunately, the code does not work properly. I tried other values than 48 (100, 150), but nothing changed, despite emptying the cache repeatedly.
HOWEVER, more important, the code also CHANGES the header on larger screens (at least on my desktop) in an impossible way. I wanted to provide you with a screenshot, but this doesn’t seem possible in this chat. You could use the private login I sent you yesterday to see for yourself what happens. The code is now “deactivated” (using /*…*/) in the functions.php.
I am not sure if there is a code, that does not change the header on larger screens AND at the same time prevent the header from covering headings. So alternatively, the sticky header could be deactivated for middle-sized screens (let’s say between min-width 991px and max-width 1366px). Would you have a code available for applying a sticky header only on screens above 1366px?
Thanks a lot!
Best regards,
CornelieHi,
Thank you for the update.
Did you change the login URL? We cannot access it using the default wp-login or wp-admin path.
The code that we suggested above should not affect the header appearance because it only adjusts the data-offset attribute of the main container, which is required to calculate the offset or scroll position.We updated the script a bit. Please try it again. Make sure to remove the browser history or check the site on incognito mode.
Best regards,
IsmaelDear Ismael,
thanks for your reply. We did not change anything to our wp login URL, I checked it with your temporary login details and it seems to work fine. However, when trying in another browser it showed me the 404-error. Please see private content for more info.
I activated the code again (in functions.php in Enfold Child – hope this is the right place) and emptied the cache and also used incognito mode. However, the headings are still covered by the sticky header on middle-sized devices. AND the header appearance on larger screens still is disrupted. Perhaps because we used quite some CSS to style the header. The header width is smaller than full-screen as to show the full-screen slide-show image left and right from the (smaller) header. The disrupted header shows shorter no longer the image left and right, but these areas have now a background-color. The linked-in image from the footer now sticks to the logo in the header. The navigation has a slightly changed appearance. Breadcrumps are shown now (although turned off for the whole site) etc.
Another solution instead of the code would be to turn off the sticky header on middle-sized devices (between min-width 991px and max-width 1366px). Could you please provide me with the code for that? The website should go live soon…
Thanks so much for your help!
Best regards, Cornelie
Hi,
Thank you for the info.
It seems to be working correctly on our end. This is where the page lands whenever we click one of the anchors.
Screenshot: deleted
What is the actual model of the device where you are testing this?
Best regards,
IsmaelHi Ismael,
thanks for your effort and feedback. I did not see the sticky header on your screenshot, but I assume it was there, since you tested it for a middle-sized screen? (tablet) Did you test it virtually, or also on a real tablet?
On two of my tablets it still does not work and the sticky header still covers the anchor headings. Moreover, the code still changes the header on desktop in an inacceptable way! (in all common browsers) Could you see that as well during your test?
It does not work on my following tablets which display the sticky header:
– Huawei Mediapad M5, 2500x1600px, sticky header and full menu in portrait view covers the anchor headings
– iPad 3rd Gen, 2048 x 1536px, sticky header and full menu in portrait view covers the anchor headingsThe code does not apply to my following tablet:
– Huawei Mediapad M5 lite, 1920x1200px, NO sticky header and burger menu in portrait view, everything works okI would be happy with NO sticky header and burger menu on the two tablets that now show the problem, since the website should go live soon. Could you please provide me with the code for deactivating the sticky header on such middle-sized screens?
Appreciate your work. Thanks a lot!
Best regards, Cornelie
Hi,
Thank you for the inquiry.
We just noticed that you are not using color sections to divide the content and apply the anchor or ID. The offset value will only be calculated if the anchor points to a color section, which is why the adjustment with the filter is not working. We created a test page so that you can see the difference of using the color section. Just click the button in the first section to scroll to the section with the ID geschichte. (see private field)
Best regards,
IsmaelThanks, Ismael, for your reply!
Indeed, I am using grid rows and normal sections for the page in question, no color sections. I wasn’t aware of the need for using color sections for the working of this code. Thanks for the observation!
However, the heading of your test site is still disappearing below the sticky header on my tablet (also after emptying the cache and working in incognito mode). :-( I provided you with two screenshots on the test page, see also private field.
Since the site should go live soon, I am a bit worried about this issue and I would prefer to deactivate the sticky header on middle-sized screens. Could you please provide me with the code for that? Many thanks in advance.
Best regards, Cornelie
Hi,
We cannot reproduce the issue on an iPad Pro device emulation. To deactivate the sticky header on larger tablets temporarily, try to use this css code.
@media only screen and (min-width: 768px) and (max-width: 1366px) { .responsive.html_mobile_menu_tablet #top #wrap_all #header { position: relative; width: 100%; float: none; height: auto; margin: 0 !important; opacity: 1; min-height: 0; } }Please make sure to toggle or temporarily disable the Enfold > Performance > File Compression settings after adding the css code.
Thank you for your patience.
Best regards,
Ismael
- You must be logged in to reply to this topic.