title: Page Jump is jumping above content
body: <p>In in my Menu (Sticky) I have page jumps, when clicked in Chrome they jump above the content then glitch down to where it should be.
   In Safari, it just goes to above the content but then stays there</p>
  
  <p>I have looked up because of the Sticky Menu but alas it brought no fix.</p>
  
  <p>My code:</p>
  
  <pre><code>                    &lt;ul class="ranch-menu"&gt;
                      &lt;li&gt;&lt;a class="active" href="#ranch-about"&gt;Home&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#ranch-riding"&gt;Riding&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#ranch-food"&gt;Food&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#ranch-rates"&gt;Rooms &amp; Rates&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#ranch-services"&gt;Activities &amp; Services&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#ranch-location"&gt;Location&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#ranch-reviews"&gt;Reviews&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#ranch-contact"&gt;Contact&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
  
  &lt;section class="ranch-riding ranch-section" id="ranch-riding"&gt;
  more content here... blah blah blah
  </code></pre>
  
  <p><a href="https://gyazo.com/43c1c38c7fe7273eee2ad9b42a4ae6fc" rel="nofollow noreferrer">https://gyazo.com/43c1c38c7fe7273eee2ad9b42a4ae6fc</a></p>