CODEWITHSUNDEEP
htmlcsswordpressfixed
eloist
eloist

Reputation: 505

Wordpress Anchor links adjust margin for fixed header

I have a Wordpress site with a fixed header. My content pages are using anchor links at the client's request. When the anchor links are clicked, the page loads with the content starting behind the fixed header. I need to figure out a way to put a permanent margin in place the height of the fixed header.

Example here: http://www.zachkeller.net/cp_site/approach/#insights

Currently, in my WP text editor, I have this html set up to account for the section headers:

<div id="method">
<div class="sectionheader">
<h1 class="sectiontitle">method</h1>
</div>
Consensus Point works with research organizations and large institutions to elicit knowledge from communities to predict future outcomes and preferences.  Our unique market algorithm, gaming techniques, and social platform provide a more engaging way for consumers and experts to be rewarded for their performance and participation.
<p style="text-align: center;"><a href="http://www.zachkeller.net/cp_site/wp-content/uploads/2013/08/how_to_play.jpg"><img class="aligncenter size-full wp-image-229" alt="How to play" src="http://www.zachkeller.net/cp_site/wp-content/uploads/2013/08/how_to_play.jpg" width="661" height="172" /></a></p>
Our platform, Huunu, is different from traditional research in that respondents are not forced to answer any questions and are able to weight their answers based on their confidence.  It is the process of self-selection and weighting based on confidence that gives the market its accuracy.
</div>

Upvotes: 0

Views: 3131

Answers (1)

metaColin
metaColin

Reputation: 1971

Are you willing to use some jQuery?

http://imakewebthings.com/jquery-waypoints/shortcuts/sticky-elements/

When setting up my own fixed header I ended up using this technique. Mainly for 2 reasons:

1) iOS support. position:fixed support is not really there on iOS devices.

2) You can specify offsets to counter exactly the problem you are having.

If you don't want to use jQuery. The CSS only solution is to assign a class to your anchor links.

<a class="offset"></a>

a.offset{
    display: block;
    position: relative;
    top: -125px; //at least the negative height of your header
    visibility: hidden;
}

Upvotes: 1

Related Questions