Fixed header hides the content starting section

Question

I've created one page website, Once the page is scrolled the header is fixed to top. The problem here I'm facing is once we click the "Service" section from the menu some portion of the page is hidden below the menu.

I have tried adding padding to the section it still results the same.

URL : here

Sorry as the website is hosted, Please check the code in hosted link. This is just a static website.

With 1000 rep you should know to post a [mcve] here. Use the `<>` snippet editor — mplungjan, Apr 03 '17 at 07:50
It seems that whatever js/jquery code you use to scroll to the services section does not take into account the header and scrolls down too far. You should post a snippet of related code to receive proper help. — yarwest, Apr 03 '17 at 07:53

score 1 · Answer 1 · edited May 23 '17 at 12:17

First of all, I agree with the comments; please post a Minimal, Complete, and Verifiable example so we can help you better. Linking to another website is not the way this platform works.

In your JavaScript you have the following code:

$('.page-scroll').bind('click', function(event) {
    var $anchor = $(this);
    $('html, body').stop().animate({
        scrollTop: $($anchor.attr('href')).offset().top
    }, 1500, 'easeInOutExpo');
    event.preventDefault();
});

if you play with that value (the offset().top) you can change the behaviour of the scrollTo.

Change it to something like this:

scrollTop: ($($anchor.attr('href')).offset().top - 77)

77 is the height in pixels of the menu. If you want some more spacing between the menu and the content, make the 77 something like 90.

Fixed header hides the content starting section

1 Answers1