0

So I have successfully gotten my page to jump to different sections on the page via buttons referencing the ID's like this

<button id="niftyBtn"><a href="#nifty">Things</a></button></br>
<div id="nifty">Blah</div>

I have several of those and they all go to the correct portion of the page. The problem is, there is a fixed nav that is included into the page that I can't change and the top of the sections are going behind that navbar instead of below it.

I have tried to use several different variations of a jquery solution I saw using .offset() but none of them have been effective. Any input is appreciated

Note: It behaves the exact same way when I use jQuery or javascript to jump the sections instead of href tags.

Katlyn Spears
  • 1
  • 1
  • 3
  • Fixed navbar will be on top of the contents that won't push the contents of the section down, quick solution add to the padding-top of each section the height of the navbar; or using js move the scroll a negative value of the height navbar – DaniP Dec 01 '16 at 20:10
  • Oh man, changing the padding had actually not occured to me, I'm not sure if that'll look bad. I have tried the scrolling to a negative value with js and it didn't seem to do anything – Katlyn Spears Dec 01 '16 at 20:13
  • I think this has been answered a few times already, unless I'm misreading your question: http://stackoverflow.com/questions/9047703/fixed-position-navbar-obscures-anchors?rq=1 http://stackoverflow.com/questions/10732690/offsetting-an-html-anchor-to-adjust-for-fixed-header – Bing Dec 01 '16 at 20:19
  • You can see this: http://stackoverflow.com/questions/4086107/html-positionfixed-page-header-and-in-page-anchors – Mert S. Kaplan Dec 01 '16 at 20:22

1 Answers1

1

You don't need a javascript solution, something as simple as this will do:

h2:before,h3:before,h4:before {
    content: " ";
    display: block;
    visibility: hidden;
    margin-top: -7em;
    height: 7em;
}

Granted, these are meant for headings, but you can substitute with a class, or IDs for the same effect. The measurements will have to be amended, of course.

BTW, why are you using <button> to wrap an <a>? That code should just be <a href="#nifty">Things</a></br> and if you want it to look like a button, style it like a button.

junkfoodjunkie
  • 3,168
  • 1
  • 19
  • 33