0

This is my page: http://ryanteaches.com/gcsechemistry. If you click the links on the left sidebar, you will see they jump but the heading is missed out (underneath nav bar).

How can I make the links jump to say 50px above the heading (and so heading will then be shown?

Many thanks.

EDIT: Code: 

#sidebar {
 text-decoration: none;
 position: fixed;
 margin-left: 0;
 margin-right: 5%;
 width: 15%;
 background-color: #f9f9f9;
 overflow: auto;
 word-wrap: break-word;
 top: 60px; 
 bottom:0;
}
<h2 class="decorated" id="AtomsEPT">Atoms, Elements and the Periodic Table</h2>
<p style="padding-bottom: 600px">TEXT</p>
<h2 class="decorated" id="Group1">Group 1</h2>
<p style="padding-bottom: 600px">TEXT</p>
<h2 id="Group7">Group 7</h2>
<p style="padding-bottom: 200px">TEXT</p>
<h2 id="Group0">Group 0 - Noble gases</h2>
Peter Hall
  • 53,120
  • 14
  • 139
  • 204
Bob
  • 109
  • 2
  • 12

3 Answers3

0

Tricky part is, it's actually working exactly as it should, it only doesn't seem like it because you are fixing your top bar, so the header is showing up behind your top nav element.

You've got a couple choices: you can not fix your top nav; you can use javascript to scroll instead of anchor tags; or you can use hidden elements above each anchor point that you actually go to instead of the headers.

Edit

the third option can probably easily be achieved by this method

Nieminen
  • 1,284
  • 2
  • 13
  • 31
0

Try adding this to your css

body{ padding-top: 60px; }

I see you are using a lot of inline css, you can do this if you want to do inline css:

<body style="padding-top: 60px;">

This will put some padding at the top of the page behind the fixed navigation bar. The body of the page will then start from just underneath the navigation bar and not hiding the heading when you link an anchor link.

Tawanike
  • 331
  • 2
  • 6
  • This didnt work - it just moved my pink container down 60px, and put a white gap on the left side of my nav bar – Bob Jun 25 '17 at 03:39
0

You can add the padding-top to your titles excluding the first one:

#sidebar {
 text-decoration: none;
 position: fixed;
 margin-left: 0;
 margin-right: 5%;
 width: 15%;
 background-color: #f9f9f9;
 overflow: auto;
 word-wrap: break-word;
 top: 60px; 
 bottom:0;
}

#content > h2:not(:first-of-type) {
  padding-top: 60px;
}
<div id="content">
  <h2 class="decorated" id="AtomsEPT">Atoms, Elements and the Periodic Table</h2>
  <p style="padding-bottom: 600px">TEXT</p>
  <h2 class="decorated" id="Group1">Group 1</h2>
  <p style="padding-bottom: 600px">TEXT</p>
  <h2 id="Group7">Group 7</h2>
  <p style="padding-bottom: 200px">TEXT</p>
  <h2 id="Group0">Group 0 - Noble gases</h2>
</div>
JV Lobo
  • 5,526
  • 8
  • 34
  • 55
  • I tried that, but it didnt work - if you go to the page and press f12, it opens the code, then click source -- styles.css and add it in, youll see what I mean haha. I figured a way of getting it "on screen" when I click the link, using span, but its still a bit too high up, would prefer it lower. However I cant get it any lower, without messing up the lines either side of the text. This issue is very frustrating – Bob Jun 25 '17 at 11:51
  • http://ryanteaches.com/styles.css thats your styles file, right? I don't see there what I proposed you to do, the :not... stuff :S you can see in that code snippet I posted how it is working – JV Lobo Jun 25 '17 at 11:54
  • I meant you yourself can physically just paste it in for a local update of what happens - Ill put it in now and upload though just for ease – Bob Jun 25 '17 at 12:01
  • you can not add pseudo selectors as :not on developer console, it doesn't work that way – JV Lobo Jun 25 '17 at 12:01
  • Okay - its uploaded - see how it messes up my lines either side, and still doesnt get rid of the gap between "GCSE chemsitry" and "atoms elements.." - I have currnetly resorted to inserting invisible text above the headings and linked to those instead lol. – Bob Jun 25 '17 at 12:04
  • I've updated my answer to get the code more like yours. I've added that parent container with id content. try adding that in your CSS: #content > h2:not(:first-child) { padding-top: 60px; } – JV Lobo Jun 25 '17 at 12:10
  • Edit made - no difference though :/ – Bob Jun 25 '17 at 12:15
  • I was reviewing my code, the thing with first-child is that it looks for the first element inside the div, and check if it matches the selector you're looking for. In my example, the first child is h2, but in your webpage, first child of your div is not h2, this is why it's no working. I've updated my answer with, I hope, it's the solution, using :first-of-type instead of :first-child. Try that and let me know :) – JV Lobo Jun 25 '17 at 12:18
  • You're correct - that worked! However, I still now have the lines issue, so I think I'll just stick with lines of hidden text, its messy and just bad but works perfectly for now lol (Im very new to coding) so ill address it again later when I have my content in – Bob Jun 25 '17 at 12:28
  • what's exactly that issue? – JV Lobo Jun 25 '17 at 12:38