Using 'skip links' in Gumby framework with a fixed CSS header

isogramma

New Member
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 234px 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!Header CSS:\[code\].fixed_header { width: 100%; height: 234px; 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);}\[/code\]Example of skip link:\[code\]<div class="four columns sidebar" data-type="skiplink_1" style="position: relative;"> <h1>Skip Link 1</h1> </div>\[/code\]Example of data-type CSS targeting:\[code\][data-type*="skiplink_1"] {margin-top: -234px !important;}\[/code\]Docs on Gumby's skip links: http://gumbyframework.com/docs/uikit#skiplink_1
 
Back
Top