-
AuthorPosts
-
September 25, 2019 at 11:01 am #1141740
I’m opening this new topic since there are some topics talking about Sticky header on mobile but there is a related topic that could be interesting for the comunity, that’s the offset necessary in the sticky header on mobile to achive a good behaviour if you use one page anchor sections. If you don’t adjust the offset then the header will overlap the section content you are trying to show after the user clic on the anchor link.
Ismael offer this solutions in this thread
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;
}The thing is that this solution affects mobile and desktop, any advise?
September 27, 2019 at 2:13 am #1142531Hey pinxe,
Thank you for the update.
We can use the wp_is_mobile function to wrap the adjustment so that it won’t affect the desktop view. The function checks if the site is viewed on a mobile device.
add_filter('avf_header_setting_filter', 'avf_header_setting_filter_mod', 9999, 1); function avf_header_setting_filter_mod($header) { if ( wp_is_mobile() ) { $header['header_scroll_offset'] = $header['header_scroll_offset'] + 48; } return $header; }
`
Best regards,
IsmaelSeptember 27, 2019 at 1:31 pm #1142750Thank you very much!
September 27, 2019 at 4:58 pm #1142823Hi,
Did you need additional help with this topic or shall we close?
Best regards,
Jordan ShannonOctober 8, 2019 at 7:49 pm #1146257Hello Ismael, hello Jordan!
The use of Ismael’s filter function in the function.php of the child theme did nothing.
The test with Chrome-Devtool as laptop is fine, when testing as Responsive, Mobile or Tablet (after reloading) the header overlaps the Content.
I used the Craetive demo as base.
Best regards
Christian- This reply was modified 5 years, 2 months ago by christian.wien.
October 10, 2019 at 6:43 am #1146756Hi,
Thank you for the follow up.
You can directly modify the script in the js > avia.js file, look for the “avia_smoothscroll” function and adjust the value of the “fixedMainPadding” variable to adjust the scroll position.
Best regards,
IsmaelOctober 19, 2019 at 1:36 am #1149446Thanks Ismael, perfect :-)
Can I place the avia.js in the child theme directory?
Best regards
ChristianOctober 21, 2019 at 6:28 am #1149717Hi,
Thank you for the update.
Yes, you can load the script from the child theme, but we don’t really recommend it because you will still have to update the file if there are changes made or added to it in one of the theme upgrades. If you want to proceed, add this code in the functions.php file to disable the default script and register the modified one.
add_action( 'wp_enqueue_scripts', 'ava_child_theme_avia_js', 10 ); function ava_child_theme_avia_js() { wp_deregister_script( 'avia-default' ); wp_enqueue_script( 'avia-default-child', get_stylesheet_directory_uri().'/js/avia.js', array('jquery'), $vn, true ); }
Create a “js” folder in the child theme directory and move the avia.js file inside.
Best regards,
IsmaelJanuary 9, 2020 at 12:21 pm #1171766I have a similar problem. I am building a page that has no navigation except the logo, which is fixed without resizing on desktop. I the first main section the are a number of anchor links down the page. The top-padding set on #main is too large, who can I change the size of the inline padding ?
- This reply was modified 4 years, 11 months ago by optimal_systems.
January 10, 2020 at 3:54 am #1172045Hi optimal_systems,
Could you post a link to where we can see the results you are getting please?
Best regards,
RikardJuly 30, 2021 at 1:32 pm #1313457Hello, I think I have a similar problem.
I also use the sticky-header for mobile CSS and also use Tabs like these (bar in top):
Is this code from Ismael working also for the mobile view of of the tabs?
Because its not working for me. I tried adding it in functions.php in child-theme and/or avia.js in parent theme, but no effect.July 31, 2021 at 5:31 pm #1313607Hey ronellenfitsch,
Please provide a link to the site/page in question so we can look into this further.
Best regards,
Jordan ShannonAugust 1, 2021 at 9:19 am #1313679Hey Jordan!
Thank you for your reply and help, I posted a Link to the Test-System into the private Content.
Greetings
StefanAugust 4, 2021 at 5:59 am #1314258Hi,
@ronellenfitsch: The filter above will not prevent the document from scrolling when a tab is clicked or opened. Is that what you are trying to do? If yes, then you will have to do the modification that we suggested in the following thread.// https://kriesi.at/support/topic/faq-accordion-keeps-randomly-jumping-on-page/#post-1302789
If you have more questions, please feel free to open another thread. We will close this one for now.
Best regards,
Ismael -
AuthorPosts
- The topic ‘Offset for sticky header on mobile’ is closed to new replies.