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

Question

I have a page which has a fixed header at the top, which is 63px in height. below this I have different sections of the page (divs) which are in essence separate pages. Each section is linked in the header as an anchor link to the relevant div id. The problem I am having is that when the anchor link is clicked the top of the div starts right at the top of the document, rather than underneath the header. Any solution would be very helpful indeed.

CSS CODE FOR THE HEADER:

#headercontainer{ position:fixed; background-color:#1a1813;  top:0px; left:0px; width:100%; height:63px; z-index:1;} 

#headercontent{ position:relative; background-image:no-repeat;  top:0px; left:0px; width:1280px; margin-left:auto; margin-right:auto;} 

CSS CODE FOR THE FIRST SECTION (THAT SHOULD BE BELOW THE HEADER WHEN THE ANCHOR IS CLICKED:

#landingcontainer{ margin-top:63px; position:relative; width:100%; height:700px; background-color:#000000;}  #landingcontent{ position:relative; width:1280px; height:700px; margin-left:auto; margin-right:auto; background-image:url("../images/landing/landing_bg.png"); background-repeat:no-repeat; 

}

HTML UP TO POINT NEEDED:

<!-- START BODY CONTAINER --> <div id="bodycontainer">     <!-- START HEADER -->     <div id="headercontainer">         <!-- START HEADER CONTENT -->         <div id="headercontent">             <div id="headerbg">                 <a href="#landingcontainer"><div id="headerlogo"></div></a>                 <div id="headercard"></div>                 <div id="headernavigation">                     <ul>                         <a href="#menucontainer"><li>Menu</li></a>                         <li>Sauces</li>                         <li>Ranches</li>                         <li>Order</li>                         <li>Franchise</li>                         <li>About</li>                     </ul>                 </div>                 <div id="headersociallinks"></div>             </div>         </div>         <!-- END HEADER CONTENT -->     </div>     <!-- END HEADER -->      <!-- START LANDING SECTION -->     <div id="landingcontainer"> 

Answer 1

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 ;)

Answer 2

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.