Fixed Topbar Vs Named Anchors

Fixed page header overlaps in-page anchors

I had the same problem.
I solved it by adding a class to the anchor element with the topbar height as the padding-top value.

<h1><a class="anchor" name="barlink">Bar</a></h1>

I used this CSS:

.anchor { padding-top: 90px; }

Anchor links to start below the header which is fixed at the top

Ive got an even better solution to this problem.

• Firstly in the css a class can be created (call it whatever you want)

.anchor{
   display:block;
   height:63px; /* this is the height of your header */
   margin-top:-63px; /* this is again negative value of the height of your header */
   visibility:hidden;
}

• In the HTML just before your actual div section starts, for example mine is #landingcontainer you should add a span tag with the class of anchor (which we made above) and an id of whatever you want. for me I did this :

<span class="anchor" id="landing"></span>

Then the actual link will not now be linked to your actual div id of the section you want to take them to, but rather the id of the span tag must be given in the link.

<a href="#landing">HOME</a>

AND THERE YOU HAVE IT!

what we are doing here in essence is making the browser stop where the span starts which is exactly the height of the header, which then makes the viewer non the wiser ;)

Offsetting Anchor Links with Fixed Header

You could include padding-top and then use negative margin-top to balance it out.

jsFiddle

h2 {
    padding-top: 70px;
    margin-top: -70px;
}

Boostrap using fixed navbar and anchor tags to jump to sections

The solution is to use:

.section {
    padding-top: 60px;
    margin-top: -60px;
}

Anchor URL with ID not correct because fixed header

Easy. Add a new element within your target p element and give that the id attribute instead:

<p>
    <span id="test" class="anchor-point"></span>
    ...
</p>

Now set your p element to have relative positioning:

p {
    position: relative;
}

Then set your new .anchor-point element to be positioned somewhere above the top of your p element and give it visibility: hidden to make it completely invisible:

.anchor-point {
    position: absolute;
    top: -70px;
    visibility: hidden;
}

JSFiddle demo.