Anchor links to start below the header which is fixed at the top
Building on Muhammed Bhikha's solution, you can avoid extra markup entirely by applying it to the ::before element of whatever elements you want to use as anchor targets. For instance, this version uses a ::before pseudo-element on all elements with an id and all a elements with a name (e.g., the usual targets). (You may want to narrow that down with a class, depending on whether you're using ::before for something else on [say] some elements with ids.)
a[name]::before,
[id]::before {
content: '';
display: block;
visibility: hidden;
height: 63px; /* this is the height of your header */
margin-top: -63px; /* this is the height of your header, negated */
}
Example:
header {
position: fixed;
min-height: 63px;
top: 0;
width: 100%;
height: 63px;
background-color: blue;
}
main {
margin-top: 63px;
}
a[name]::before,
[id]::before {
content: '';
display: block;
visibility: hidden;
height: 63px; /* this is the height of your header */
margin-top: -63px; /* this is the height of your header, negated */
}<header>
Header
</header>
<main>
<ul>
<li><a href="#one">One</a></li>
<li><a href="#two">Two</a></li>
<li><a href="#three">Three</a></li>
<li><a href="#four">Four</a></li>
<li><a href="#five">Five</a></li>
</ul>
<p id="one">One: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p><a name="two"></a>Two: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p id="three">Three: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p><a name="four"></a>Four: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p id="five">Five: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<!-- So there's room to scroll at the bottom -->
<div style="min-height: 100vh"></div>
</main>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 ;)
Just add a padding-top: 63px; to the element you're anchor linking to. ie a hypothetical <div id="sauceslanding"> would have CSS of #sauceslanding { padding-top: 63px; } with a link to it of <a href="#sauceslanding">Sauces</a>.
Tested it, and this works for me. If it doesn't work for you, create a jsfiddle or some live test we can play around with to see if you may have a problem in your code somewhere.
UPDATE
Where you have this:
#menucontainer{
position:relative;
width:100%;
height:700px;
background-color:#1d0f00;
padding-top:63px;
}
/* END MENU CONTAINER */
/* MENU CONTENT */
#menucontent{
position:relative;
width:1280px;
height:700px;
margin-left:auto;
margin-right:auto;
background-image:url("../images/menu/menu_bg.png");
background-size:cover;
background-repeat:no-repeat;
}
Update it to this:
#menucontainer{
position:relative;
width:100%;
height:700px;
background-color:#1d0f00;
padding-top:63px;
background-image:url("../images/menu/menu_bg.png");
}
/* END MENU CONTAINER */
/* MENU CONTENT */
#menucontent{
position:relative;
width:1280px;
height:700px;
margin-left:auto;
margin-right:auto;
background-size:cover;
background-repeat:no-repeat;
}
What you'll likely see then is that the top part of the image then gets cut off as if there were no padding. What you'll need to do then is modify your background image to have an additional 63px of dead space (extend the fence pattern North). Then you're good to go.
I have a pageful of <p class="paragraph" id="#uniqueid"> tags and so there's no preset/predictable height on the elements. The solution that worked best--without wreaking havoc on the rest of the established CSS/layout--was this one from CSS-tricks:
div#container p.paragraph:before {
content: " ";
margin-top: -180px;
height: 180px;
visibility: hidden;
}
Nothing else needed.
(FYI to anyone who is thinking of using this solution: it works as long as you don't need anything in the affected element to be clickable/selectable as this method appears to mess with actual on-screen position of things. But fine for casual browsing.)