Hi guys,
I have the following problem. I am using a single page design and use jQuery to get an offset of -85. It works for the larger screens, but as soon as I apply the media queries, the headers on each page disappear. What is the correct way to sort out the issue? CSS/JavaScript…. and where on planet Earth do I begin?
$(‘.scroll’).click(function(event) {
event.preventDefault();
var full_url = this.href;
var parts = full_url.split(‘#’);
var trgt = parts[1];
//var target_offset = $(‘#’+trgt).offset();
var target_offset = $(‘#’+trgt).offset();
var target_top = target_offset.top -85;
//add the magic
$(‘html, body’).animate({scrollTop:target_top}, 500);
});
$(‘nav#navigation a’).click(function(){
$(‘nav#navigation a’).removeClass(‘active’);
$(this).addClass(‘active’);
});
http://cdpn.io/vBqin