Black Friday Sale! Get up to $40 off GP Premium!Learn more

[Resolved] Single Page Scrolling Sticky Nav to ID Overlap

Home Forums Support Single Page Scrolling Sticky Nav to ID Overlap

  • This topic has 3 replies, 2 voices, and was last updated 3 years ago by Tom.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #423624
    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

    GeneratePress 1.4
    GP Premium 1.5.2
    #423732
    Tom
    Lead Developer
    Lead Developer

    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

    #423930
    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>
    #424235
    Tom
    Lead Developer
    Lead Developer

    Perfect – thanks for sharing! 🙂

Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.