Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #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?

    #1142531

    Hey 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,
    Ismael

    #1142750

    Thank you very much!

    #1142823

    Hi,

    Did you need additional help with this topic or shall we close?

    Best regards,
    Jordan Shannon

    #1146257

    Hello 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

    #1146756

    Hi,

    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,
    Ismael

    #1149446

    Thanks Ismael, perfect :-)

    Can I place the avia.js in the child theme directory?

    Best regards
    Christian

    #1149717

    Hi,

    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,
    Ismael

    #1171766

    I 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 ?

    #1172045

    Hi optimal_systems,

    Could you post a link to where we can see the results you are getting please?

    Best regards,
    Rikard

    #1313457

    Hello, 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.

    #1313607

    Hey ronellenfitsch,

    Please provide a link to the site/page in question so we can look into this further.

    Best regards,
    Jordan Shannon

    #1313679

    Hey Jordan!

    Thank you for your reply and help, I posted a Link to the Test-System into the private Content.

    Greetings
    Stefan

    #1314258

    Hi,


    @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

Viewing 14 posts - 1 through 14 (of 14 total)
  • The topic ‘Offset for sticky header on mobile’ is closed to new replies.