StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>Just add a <code>padding-top: 63px;</code> to the element you're anchor linking to. ie a hypothetical <code><div id="sauceslanding"></code> would have CSS of <code>#sauceslanding { padding-top: 63px; }</code> with a link to it of <code><a href="#sauceslanding">Sauces</a></code>.</p> <p>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.</p> <p><strong>UPDATE</strong></p> <p>Where you have this:</p> <pre><code>#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; } </code></pre> <p>Update it to this:</p> <pre><code>#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; } </code></pre> <p>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.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload