Is there a way to override jQuery offset when using media queries?

[Archie22is]

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

[Archie22is]

Let me know if you require the demo url (it’s still a working progress – so it’s not done as yet)

[dfogge]

codepen plz

[Author]

Posts