Question

I’m trying to see if there is any way to adjust for a fixed position header using CSS with the Gumby Frameworks’s “skip links” anchor link solution.

I’ve tried pushing layers down with a negative margin and also attempted to target the data-type attribute with CSS to no avail. Everything I’ve tried so far has also moved the div on the page itself.

My header has a fixed height of 682px and I would like to find a way to keep all content below that and have the skip links feature still work.

Any suggestions would be greatly appreciated!

Example Link

Header CSS:

body {
    padding-top:268px !important;
}

.fixed_header {
    width: 100%;
    height: 268px;
    background: url(../img/green_header_grad.png) repeat-x;
    ;
    position: fixed;
    text-align: center;
    z-index: 999;
    border-bottom: 1px solid #FEFEF4;
    -moz-box-shadow: 3px 3px 6px rgba(0,0,0,0.3);
    -webkit-box-shadow: 3px 3px 6px rgba(0,0,0,0.3);
    box-shadow: 3px 3px 6px rgba(0,0,0,0.3);
    top: 0px;
}

Answer 1

Changing the margin value of the body or inserting an offset to match the fixed header height is the just first step.

What seems to work is to move the data-type attribute within a span that is inside the layer you want to skip to. Then the span needs an absolute position and then a negative value or offset needs to be applied to match the header (-286px):

HTML:

<div class="four columns sidebar"">
<span class="anchor" id="founder" data-type="skiplink_3"></span>
</div>
<div class="eleven columns main_col"></div>
</div>

CSS:

span.anchor {
position:absolute;
top: -268px;
display: block;
visibility: hidden;
}