I have a fixed header followed by a list with various anchor tags. By default, the anchor will jump to the top of the browser. I need to offset this so it displays below the header.

I found a solution online, but became quite annoyed once I found out that yes it works but only in FF, not webkit.


So if anyone can figure out a nice way to do above that also works with webkit, I'd be so happy. It's one of the last bits of my UI I have left to finish and it's starting to frustrate me.

3 Years
Discussion Span
Last Post by Dani

Have a look at Twitter Bootstrap - they have something similar I believe.


Second that picking up and tweaking a responsive framework like bootstrap is the way to go... I have and I've yet to regret doing so.

I've used one in my CMS platform ignitedcms (github).

You can also find prestyled bootstrap themes on TF for $10 one of them is sure to fit your existing theme with minor tweaks.



I'm trying to do this as well. I found that you can set:

    padding-top: 50px; /* or however the height of your header */
    margin-top: -50px;

The negative margin will offset the padding and it will all look correct and the anchor will work. But unfortunately it layers each section to be anchored on top of each other such that the text is no longer selectable when doing something like:

<section id="#a">A</section>
<section id="#b">B</section>
<section id="#c">C</section>
This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.