Hey Leo,
So I have had some time to look at this problem again because I wasn’t ever really satisfied with the solution.
After some messing around with some stuff I have figured out that ja-header correlates to this code
<body class="homepage" data-target="#t3-mainnav" data-spy="scroll" data-offset="61">
where data-offset equals the same height as ja-header. Now I checked this in the original version of JA-Onepage and it still holds true.
To see what was happening better I changed this code temporarily with firebug.
<header id="ja-header" class="wrap ja-header navbar-fixed-top navbar-collapse-fixed-top">
to
<header id="ja-header" class="wrap ja-header navbar-fixed-bottom navbar-collapse-fixed-bottom">
Then when you click menu items you can see in desktop view that there is an offset that matches the data-offset value.
Which would make sense because you want about us to show up under the floating menu.
However, when you swap to a mobile view, say 360×640, there is no offset from the top. It just happens that there is enough padding in the original JA-Onepage that you get away with it.
So it seems that the offset is turned off for mobile.
Is there a way to turn this back on so the offset from the top is the same as ja-header for mobile size?
My best guess is that it resides in header.php in the smooth scroll section.
<!-- smooth scroll -->
<script type="text/javascript">
!function($) {
var winurl = window.location.href.replace(/([^#]*)(.*)/, '$1');
window.reflow = function () {
if('ontouchstart' in window){
document.documentElement.style.width = (document.documentElement.offsetWidth + 1) + 'px';
setTimeout(function () {
document.documentElement.style.width = '';
}, 0);
}
};
$('.navbar ul li a').each (function (){
var href = this.href,
target = this.hash ? this.hash : href.replace(/.*(?=#[^s]+$)/, ''),
target_url = href.replace(/([^#]*)(.*)/, '$1');
if(this.hostname != window.location.hostname || target.substr(0, 1) != '#'){
return;
}
$(this).attr('href', target).data('target', target);
});
$('.navbar ul li a').click (function(e) {
if (!$(this).data('target')){
return;
}
var target = this.href.replace(/.*(?=#[^s]+$)/, '');
if (target && ($(target).length)) {
e.preventDefault();
$('html,body').animate({scrollTop: Math.max(0,
$(target).offset().top
- ((!($('html').hasClass('off-canvas') && $('.btn-navbar').is(':visible')) && $('#ja-header').css('position') == 'fixed') ? $('#ja-header').height() : 0)
+ 2)}, {
duration: 800,
easing: 'easeInOutCubic',
complete: window.reflow
});
} else { //not found
var home = $('.navbar ul li a.home').attr('href');
if(home){
window.location.href = home.replace(/([^#]*)(.*)/, '$1') + target;
}
}
});
$(document).ready(function(){
var ftarget = window.location.href.replace(/.*(?=#[^s]+$)/, '');
if(ftarget.substr(0, 1) == '#'){
ftarget = $(ftarget);
if(ftarget.length){
$('html,body').scrollTop(Math.max(0, ftarget.offset().top - ((!($('html').hasClass('off-canvas') && $('.btn-navbar').is(':visible')) && $('#ja-header').css('position') == 'fixed') ? $('#ja-header').height() : 0) + 1));
window.reflow();
}
}
var homelink = $('.navbar ul li a.home')[0];
if(homelink){
var home_url = homelink.href.replace(/([^#]*)(.*)/, '$1'),
home_target = homelink.hash ? homelink.hash : homelink.href.replace(/.*(?=#[^s]+$)/, '');
if(home_url == winurl){
if(home_target.substr(0, 1) != '#'){
homelink.href = home_target = '#onepage-home';
$(homelink).data('target', home_target);
}
home_target = $(home_target);
if(!home_target.length){
home_target = $('<div id="onepage-home" style="width: 0; height: 0; visibility: hidden">').prependTo(document.body);
}
} else {
home_target = null;
}
$(homelink).unbind('click').click(function(e){
if(home_target){
e.preventDefault();
$('html,body').animate({scrollTop: Math.max(0, (home_target.offset().top - $('#ja-header').height() + 2))}, {
duration: 800,
easing: 'easeInOutCubic',
complete: window.reflow
});
}
});
}
});
}(window.jQuery);
</script>
<!-- //smooth scroll -->
I know this might be beyond the scope of support, but I do feel that it isn’t an unreasonable request to adjust the height of the header and have the sections lineup where they are supposed to for both mobile and desktop.
As always, any help is appreciated. 🙂
Ninja Lead 10 years, 5 months ago.
