I'm having an annoying issue trying to position the responsive navigation hamburger. I am using a plugin called responsive menu which creates the hamburger and uses absolute positioning.

I am trying to position the hamburger in the centre of the header at all times. To achieve this I am using the following jQuery code.

However, the issue I have is when the hamburger is displayed and you scroll down the page and scroll back to the top of the page quickly. The hamburger does not position itself in the centre of the header. You need to scroll back down slightly for it to jump into place.

Any ideas how I can fix this please.. It's driving me crazy and I don't know jquery very well :(

Thank you for any advice in advance :)

Link to the site in question - stratusassociates

$( window ).on("load resize scroll", function(e){ var headerHeight = $('nav').height()/2; var iconHeight = $('#click-menu').height()/2; var total = headerHeight - iconHeight; if ($(window).scrollTop() >= 1) { $('#click-menu').css('top', total); } else { $('#click-menu').css('top', total); } });