I know this question has been asked before and I have had a looked at the solutions proposed solutions and they don't actually answer the question. As you can be seen the fixed navbar overlays the top of the section (attached image) and you can't see the Why Choose US.
This is a one page design in Wordpress using sections, this section is structured like this
<section class id data-section-title>
CONTENT
</section>
I have been trying to implement a solution using pure CSS as suggest here:
http://fellowtuts.com/html-css/offsetting-anchor-hash-tag-links-to-adjust-for-fixed-header/
For the example section above I have the following CSS.
#whuchooseus:before {
display: block;
content: " ";
height: 150px; /* Give height of your fixed element */
margin-top: -150px; /* Give negative margin of your fixed element */
visibility: hidden;
}
I can see the before selector working when using firebug however when you navigate to the section it still headbutts the top of the browser window and the navbar overlays the top of the section (which is the standard behavior).
I have also tried to implement a JS solution based on using:
"While some of the proposed solutions work for fragment links (= hash links) within the same page (like a menu link that scrolls down), I found that none of them worked in current Chrome when you want to use fragment links coming in from other pages.
So calling www.mydomain.com/page.html#foo from scratch will NOT offset your target in current Chrome with any of the given CSS solutions or JS solutions.
There is also a jQuery bug report describing some details of the problem.
SOLUTION
The only option I found so far that really works in Chrome is JavaScript that is not called onDomReady but with a delay."
// set timeout onDomReady
$(function() {
setTimeout(delayedFragmentTargetOffset, 500);
});
// add scroll offset to fragment target (if there is one)
function delayedFragmentTargetOffset(){
var offset = $(':target').offset();
if(offset){
var scrollto = offset.top - 95; // minus fixed header height
$('html, body').animate({scrollTop:scrollto}, 0);
}
}
The above is based on the solution from here:
http://stackoverflow.com/questions/4086107/html-positionfixed-page-header-and-in-page-anchors
It would be greatly appreciated if I could get help to get either one of these solutions working for the site, I do also feel a number of people could use a general solution that could be fairly easily implement in any themler one page theme with a fixed navbar.
I know this question has been asked before and I have had a looked at the solutions proposed solutions and they don't actually answer the question. As you can be seen the fixed navbar overlays the top of the section (attached image) and you can't see the Why Choose US. This is a one page design in Wordpress using sections, this section is structured like this <section class id data-section-title> CONTENT </section> I have been trying to implement a solution using pure CSS as suggest here: http://fellowtuts.com/html-css/offsetting-anchor-hash-tag-links-to-adjust-for-fixed-header/ For the example section above I have the following CSS. #whuchooseus:before { display: block; content: " "; height: 150px; /* Give height of your fixed element */ margin-top: -150px; /* Give negative margin of your fixed element */ visibility: hidden; } I can see the before selector working when using firebug however when you navigate to the section it still headbutts the top of the browser window and the navbar overlays the top of the section (which is the standard behavior). I have also tried to implement a JS solution based on using: "While some of the proposed solutions work for fragment links (= hash links) within the same page (like a menu link that scrolls down), I found that none of them worked in current Chrome when you want to use fragment links coming in from other pages. So calling www.mydomain.com/page.html#foo from scratch will NOT offset your target in current Chrome with any of the given CSS solutions or JS solutions. There is also a jQuery bug report describing some details of the problem. *SOLUTION* The only option I found so far that really works in Chrome is JavaScript that is not called onDomReady but with a delay." // set timeout onDomReady $(function() { setTimeout(delayedFragmentTargetOffset, 500); }); // add scroll offset to fragment target (if there is one) function delayedFragmentTargetOffset(){ var offset = $(':target').offset(); if(offset){ var scrollto = offset.top - 95; // minus fixed header height $('html, body').animate({scrollTop:scrollto}, 0); } } The above is based on the solution from here: http://stackoverflow.com/questions/4086107/html-positionfixed-page-header-and-in-page-anchors It would be greatly appreciated if I could get help to get either one of these solutions working for the site, I do also feel a number of people could use a general solution that could be fairly easily implement in any themler one page theme with a fixed navbar.
