1

I'm using the code below to jump to different sections of this page

<span id="section1">
<a href="#section1"></a>

Basically when you click the link it jumps to that section but my floating navigation blocks the titles. How do make the page "jump" to "section1" but with a 50 margin?

EDIT: These are acceptable solutions but I forgot to mention that I am using a plug in called "Table of Contents Plus" to create these links. I'm not proficient with javascript and need to know what to modify in the plug in code to add these solutions.

shictins
  • 83
  • 8
  • make your navigation block fixed like here https://getbootstrap.com/examples/navbar-fixed-top/ – demo Jul 22 '16 at 16:02

2 Answers2

2

I used your specific page and this answer to come up with a decent solution. The <span> that actually has the anchor id should have the style of position: relative; top: -100px and the inner <strong> that has the actual text should be position: relative; top: 100px. This causes the text to appear where it would normally, but causes the anchor link to send you a bit above the text. You can play with the exact numbers until it looks exactly how you like.

Community
  • 1
  • 1
Robert Hickman
  • 997
  • 1
  • 11
  • 22
2
section1:target {margin-top: 50px}

the :target pseudo-class applies properties when you have the id in the URL.

user6622043
  • 101
  • 1
  • 7