0

I have a fixed top navigation bar 100px deep on web page and links on that bar go to id's down the page. The id's are associated with the h3 heading for each section. Unfortunately on clicking the link the page moves up and the first 100px is hidden behind the fixed top bar.

I could possibly embed the id's elsewhere in the page roughly 100px higher than the point I'm linking to (not that easy given the quite graphical design). I wonder if anyone knows any way to force those id's to stop 100px short of the top of the page?

Unfortunately I have to keep the development site behind a maintenance screen so I can't provide a URL. Thanks in anticipation (my first post to StackOverflow!)

Jeremy

WebsWonder
  • 1
  • Can you provide us a snippet of code? Just the HTML/CSS/JS related to your question. You can put it directly in your question or share it with codepen, etc... – Dinei May 20 '15 at 14:28
  • 1
    Does this maybe help you? http://stackoverflow.com/questions/10732690/offsetting-an-html-anchor-to-adjust-for-fixed-header – rst May 20 '15 at 14:30

2 Answers2

0

One solution is to use the :target pseudo class to shift your headings about a bit. The trick is to increase their top padding by the height of your fixed element and then move them back up the page by subtracting the same amount from their top margin.

So, using your example of a 100 pixel high fixed element and assuming no existing padding or margin on your h3 elements, here's how the CSS would look:

h3:target{
    margin:-100px 0 0;
    padding:100px;
}

You may want to tweak those values, depending on your design, to add a bit of space between the fixed element and your headings.

Shaggy
  • 6,696
  • 2
  • 25
  • 45
  • Thanks Shaggy. It kind of works.. ;-) I've removed the maintenance mode so you can take a look. Excuse the rest, I still have a lot to do ;-) http://www.sanclerorganic.com/wordpress/ (After July 2015 skip the /wordpress) CSS for home page http://bit.ly/1HxkzvH I've applied the fix to just the "About Us" link at the top referring down to the id of the div around that section #aboutuswrap:target{ margin:-155px 0 0 0; padding:155px 0 0 0; } The "Recipes" link next to it is what I'm trying to overcome - the target hidden behind the banner. Thanks, Jeremy – WebsWonder May 21 '15 at 18:50
0

I've found the answer

You can see it at work at

http://www.sanclerorganic.com/wordpress

The link code on the navigation bar is 

<a href="#recipeshomelink">Recipes</a>

and the target down the page is 

<div style="position:relative;">  
<div id="recipeshomelink" style="position:absolute; top:-115px;"></div>  
</div>

Obviously the -115px is adjusted to suite the top bar depth.

I hope this helps others.

Jeremy

WebsWonder
  • 1