Hi,
I’m building a one-page website. the header is sticky and the links scrolls the page to the given section. When the page scrolls, it scrolls too far, and hides the top of the section behind the menu. Is there a way to get the page to scroll so the section starts right beneath the menu, so everything is visible?
How is it:
How it should be:
The website can be found here: http://projects.cornerstonetemplates.store/
Hi there,
Thanks for writing in.
Pro header builder doesn’t support one-page navigation yet, it’s only applicable for the standard header, for now. Please add this code to your global custom javascript as a temporary fix.
jQuery( function($){
$(document).on('click', 'ul#menu-main-menu.x-menu a[href^="#"]', function( e ) {
e.stopPropagation();
$('html, body').stop().animate( { scrollTop : $($(this).attr('href')).offset().top - $(this).parent().height() }, 'linear' );
} );
} );
This is only applicable in your current setup and this may not work in the future. And we can’t cover any snippets and custom codes when it fails due to updates and compatibility issue. You may remove it as well when one-page navigation for Pro header becomes available 
Thanks!
Thanks Rad,
Is there a way of also including the “learn more” button?
I will also have 3 sub-pages, with anchor links to the front page e.g. “http://projects.cornerstonetemplates.store/#about” is there some javascript i should add to either the sub pages or front page to make this look smooth?
Thanks in advance.
Hi There,
To add learn more button it would be different because it is on a different container. Something like this:
jQuery( function($){
$(document).on('click', 'ul#menu-main-menu.x-menu a[href^="#"]', function( e ) {
e.stopPropagation();
$('html, body').stop().animate( { scrollTop : $($(this).attr('href')).offset().top - $(this).parent().height() }, 'linear' );
} );
$(document).on('click', '.hm7.x-anchor-button', function( e ) {
e.stopPropagation();
$('html, body').stop().animate( { scrollTop : $($(this).attr('href')).offset().top - $('ul#menu-main-menu.x-menu a[href^="#"]').parent().height() }, 'linear' );
} );
} );
Coming from other page, it should go to correct section using hash already. No need for any custom function. Further customization from here would be getting into custom development which is outside the scope of our support. Thank you for understanding.
Hi,
When coming from another page, the header still covers the top part of the section.
As an example, when you’re on this page: http://projects.cornerstonetemplates.store/index.php/life-cafe/
and click on the “ABOUT” link in the menu (this link: http://projects.cornerstonetemplates.store/#about)
The header covers like this:
Instead of like this:
how can i solve this? I’m assuming we can tell the page to scroll to X pixels above the anchor. (X being the header height)
Thanks in advance!
Yes I am needing the same solution. Something to offset by a certain number of pixels. Thanks!
Hello @my401k,
Thank you for updating this thread. The solution above is tailored with his own url. To better assist you, we would highly recommend that you open up your issue in a separate thread. If you’re site is under construction mode, it is good if you provide us the access so that we can view your site and take a closer look. This is to make sure that we can give your the best option that would resolve the issue or the thing you want to have in mind.
Thank you for your understanding.
Hi @RueNel,
You only answered to my401k’s message and not mine, could you pelase re-read my latest comment and try to fix this?
Thanks
Hello There,
Sorry bout that. I have inspected your site particularly this page: http://projects.cornerstonetemplates.store/#about. I can see the issue here that the header is covering the header. We need to add something that will move the section down. You can make use of this code:
(function($){
var pageAddress = window.location.hash;
if ( pageAddress || pageAddress != '' ) {
console.log(pageAddress);
var navbar = $('.x-navbar').outerHeight();
var yloc = $(pageAddress).offset().top - $('.x-bar-fixed').height();
console.log($(pageAddress).offset().top);
console.log('tab: ' + pageAddress + ', yloc: ' + yloc);
$('html, body').animate({
scrollTop: yloc
}, 850, 'easeInOutExpo');
}
})(jQuery);
We would loved to know if this has work for you. Thank you.
Hi @RueNel,
Thanks for the quick reply.
I added this to the front page JS, but it doesn’t seem to have helped. I’ll add the login details, so you can test it if you want.
Best,
Johan
Hi @Johanschack,
I went ahead and added the following code in your Customizer via Appearance > Customize > Custom > Edit Global Javascript
jQuery(document).ready(function($) {
var $body = $('body');
var bodyHeight = $body.outerHeight();
var adminbarHeight = $('#wpadminbar').outerHeight();
var navbarFixedTopHeight = $('.hm11').outerHeight();
var locHref = location.href;
var locHashIndex = locHref.indexOf('#');
var locHash = locHref.substr(locHashIndex);
var dragging = false;
$body.on('touchmove', function() {
dragging = true;
} );
$body.on('touchstart', function() {
dragging = false;
} );
//
// Calculate the offset height for various elements and remove it from
// the element's top offset so that fixed elements don't cover it up.
//
function animateOffset( element, ms, easing ) {
$('html, body').animate({
scrollTop: $(element).offset().top - adminbarHeight - navbarFixedTopHeight + 1
}, ms, easing);
}
//
// Page load offset (if necessary).
//
$(window).load(function() {
if ( locHashIndex !== -1 && $(locHash).length ) {
animateOffset(locHash, 1, 'linear');
}
});
//
// Scroll trigger.
//
$('a[href*="#"]').unbind('touchend click').bind('touchend click', function(e) {
console.log($('.hm1.x-bar-fixed').outerHeight());
href = $(this).attr('href');
notComments = href.indexOf('#comments') === -1;
if ( href !== '#' && notComments ) {
var theId = href.split('#').pop();
var $el = $('#' + theId);
if ( $el.length > 0 ) {
e.preventDefault();
if (dragging) {
return;
}
animateOffset($el, 850, 'easeInOutExpo');
}
}
});
});
It seems to have fixed the issue, clear your browser’s cache and reload the site.
Let us know how this goes!
Thanks @Nabeel , that works.
Will i be able to move this to the specific page’s JS instead of global?
Hey there,
Glad it works. Yes you can move the code anywhere.
Cheers!
As addition, I will personally recommend it to be global if you’re going to do scroll automation in multiple pages. Thanks!
Thanks for this. I was able to use it on a client site by changing the navbarFixedTopHeight element from .hm11 to .h-masthead.
Glad it helped you as well.
Cheers!
Would it be possible to get a similar fix for a site we’re working on?
This is the link in question: https://www.test.betdsi.com/casino/#baccarat
I attempted to apply the suggested fix, but couldn’t get it to scroll quite far enough. I needed to add an additional 50 or so pixels.
Thanks!
Hey There,
Please have the JS code updated and use this instead:
jQuery(document).ready(function($) {
var $body = $('body');
var bodyHeight = $body.outerHeight();
var adminbarHeight = $('#wpadminbar').outerHeight();
var navbarFixedTopHeight = $('.x-masthead').outerHeight();
var locHref = location.href;
var locHashIndex = locHref.indexOf('#');
var locHash = locHref.substr(locHashIndex);
var dragging = false;
$body.on('touchmove', function() {
dragging = true;
} );
$body.on('touchstart', function() {
dragging = false;
} );
//
// Calculate the offset height for various elements and remove it from
// the element's top offset so that fixed elements don't cover it up.
//
function animateOffset( element, ms, easing ) {
$('html, body').animate({
scrollTop: $(element).offset().top - adminbarHeight - navbarFixedTopHeight + 1
}, ms, easing);
}
//
// Page load offset (if necessary).
//
$(window).load(function() {
if ( locHashIndex !== -1 && $(locHash).length ) {
animateOffset(locHash, 1, 'linear');
}
});
//
// Scroll trigger.
//
$('a[href*="#"]').unbind('touchend click').bind('touchend click', function(e) {
console.log($('.x-masthead').outerHeight());
href = $(this).attr('href');
notComments = href.indexOf('#comments') === -1;
if ( href !== '#' && notComments ) {
var theId = href.split('#').pop();
var $el = $('#' + theId);
if ( $el.length > 0 ) {
e.preventDefault();
if (dragging) {
return;
}
animateOffset($el, 850, 'easeInOutExpo');
}
}
});
});
We would loved to know if this has work for you. Thank you.
Perfect, thanks!
Glad that we could be of a help