Move anchors offset on mobile

Hi Ismael,
Thanks for your reply.

I completely agree with you and I would love to use the same layout on all devices! And It would be beneficial to the theme if the design and layout of the pages are consistent ;-)
Indeed, I enabled “Sticky header” and “Unstick topbar” options on desktop because this is the behavior I needed, but this behavior is not available on smaller devices and I needed to add some code to get Sticky header only on them…
I also asked in this thread: https://kriesi.at/support/topic/unstick-topbar-on-mobile/ and Mike already spent a lot of time trying to make it work, but results were not exactly the same as on desktop.
So if you have any idea to achieve this or if the next theme update could do it, it would be wonderful! ;-)

For the moment, I will need to use offset solution and I thank you for this function.
I need to use it on page-id-921 and page-id-923 only and on mobile and tablet only (maybe I will need to attribute an offset value for mobile and another one for tablet).
First, I tried to insert additional conditional function for pages like this:

function avf_header_setting_filter_mod($header) {
		if ($("#top.page-id-921" || "#top.page-id-923")){
	$header['header_scroll_offset'] = $header['header_scroll_offset'] + 48;
	return $header;}
}
add_filter('avf_header_setting_filter', 'avf_header_setting_filter_mod', 9999, 1);

or

function avf_header_setting_filter_mod($header) {
		if(is_page(array( 921, 923))) {
	$header['header_scroll_offset'] = $header['header_scroll_offset'] + 48;
	return $header;}
}
add_filter('avf_header_setting_filter', 'avf_header_setting_filter_mod', 9999, 1);

…but it doesn’t work.

Could you please tell me what I’m doing wrong and what is the good way to insert this and the device size conditions?

Thanks a lot, Ismael!
Best regards

Hi Ismael,
Thanks for your reply!

I agree with you about what is really necessary to be adjusted, like classic menu converted in burger menu, etc… But it absolutely doesn’t explain why “Unstick topbar” option does not work on mobile for example, while this option is more necessary on mobile than on desktop, because there is less screen space on mobile.

I tried your corrected function and it seems to work on screens from 768px, but it doesn’t work on smaller screens and I need it on smaller screens only.
Could you please tell me what’s wrong?

Furthermore, I noticed one more thing that works on desktop and not on smaller screens: the “go back to top of page” button (https://imgur.com/Zje0n6O) is displayed on desktop but not on tablet and mobile.
Could you please tell me how to fix this?

Thanks a lot for your help!

Hi Ismael,

Thanks for your reply.
Be sure that I consider all advice that you or your team can give to me, and I will quickly take a look to my layout on small screens ;-)
Thanks a lot!

I’m sorry, but you didn’t answered to the first part of my previous post:

I tried your corrected function and it seems to work on screens from 768px, but it doesn’t work on smaller screens and I need it on smaller screens only.
Could you please tell me what’s wrong?

Hi Ismael,
Thanks for your reply.
I already tried this.
To show you, I made a video that you can find in private content.
I replaced 48 to 348 and as I told you before, you can see it works and it makes a change on desktop screen, but it is not on smaller screens…