Search code examples
jquerymenuanchor-scroll

can't seem to get the links to the right heights on the website because my menu is in the way


I have a website with a fixed menu, and the menu links throw the user down the one page to the content for the link they clicked. But because I have the fixed menu, when I click on a link in the menu and the website throws me down, it would be perfect, if my menu wasn't in the way. But it is. I'd like the content to start after my fixed menu, but I don't know how to get that done. This is the jQuery I use to get the links to throw the user down:

$(document).ready(function(){
$('li a[href^="#"]').on('click',function (e) {
    e.preventDefault();

    var target = this.hash;
    var $target = $(target);

$('html, body').stop().animate({
     'scrollTop': $target.offset().top
}, 900, 'swing');
            window.location.hash = target;
        });
    });
});

Solution

  • Change $target.offset().top to $target.offset().top - 64 to account for the height of the fixed menu. Adjust as needed based on the height of the menu, or just query for the actual current height of the menu in code.