[Resolved] Single Page Scrolling Sticky Nav to ID Overlap

[Oliver]

Hi Tom,

For those of us who build one page landing pages that scroll to a set ID and use the sticky nav in GP Premium would it be possible to add a setting in the customiser to set where the sticky nav should stop i.e top or bottom of sticky nav. Currently the sticky nav stops at the top of the section ID (in my case on Elementor sections as I am using the Elementor page builder) but the sticky nav stops overlapping the Set ID at the top of the browser covering the content. It would be great if there was a setting in the customiser to adjust this so it stops before the section IDs.

I hope this make sense, I have attached a video link showing you where I would like it to stop.
If this can be done with css great let me know but I feel it’s more of a jquery customisation?

https://www.dropbox.com/s/8vn0fljurq60h5f/Sticky%20Nav%20Overlap%20Of%20Scroll%20to%20Section%20ID.mov?dl=0

Thanks,
Oliver

[Tom]

Hi Oliver,

This has been asked a lot – unfortunately it’s not super easy to do, at least not in a way that offers maximum compatibility.

This might help: https://generatepress.com/forums/topic/sticky-menu-offset/#post-344802

[Oliver]

Thanks Tom, It didn’t work for me but I have found a solution which works perfectly!

<script>
(function($) {
  $('a[href*=#]:not([href=#])').click(function() 
  {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') 
        || location.hostname == this.hostname) 
    {
      
      var target = $(this.hash),
      headerHeight = $(".primary-header").height() + 5; // Get fixed header height
            
      target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
              
      if (target.length) 
      {
        $('html,body').animate({
          scrollTop: target.offset().top - 70
        }, 500);
        return false;
      }
    }
  });
})(jQuery);
</script>

[Tom]

Perfect – thanks for sharing! 🙂

[Author]

Posts