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 sec

Answer 1

Just add a padding-top: 63px; to the element you're anchor linking to. ie a hypothetical

would have CSS of #sauceslanding { padding-top: 63px; } with a link to it of Sauces.

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.

0 讨论(0)

查看其它4个回答

发布评论:

提交评论

---

•  加载中...