Sticky Header hiding anchor

[ywoolf]

Hi - My sticky header is hiding my anchor.

If I add a padding to the anchor - it creates padding in the site…

#building {padding-top: 100px !important; }
#need {padding-top: 100px !important; }
#embedded {padding-top: 100px !important; }
#mentorships {padding-top: 100px !important; }

[mldarshana]

Hi There,

Thanks for writing in! Here’s how it renders on my end (check secure note). Could you please explain the issue you’re experiencing with a screenshot to assist you further.

Thanks!

[ywoolf]

Hi - This is how it looks when I put in this css - #development {padding-top: 100px !important; }

There shouldn’t be so much space between those rows. If I remove the css - then the sticky header hides the top line of the anchor.

[ruenel]

Hello There,

Thank you for the clarifications.

To resolve your issue, please do this:
1.) Remove your custom css because it adds unnecessary empty spaces between your sections.
2.) Use this custom JS code instead in the Cornerstone custom js section, Custom JS

(function($){
    $(document).on('click', 'a[href*="#"]', function(e) {

        e.preventDefault();

        console.log( $(this).attr('href') );

        var hash = '#' + $(this).attr('href').split('#')[1];

        if ( hash == '#' ) return false;

        $('html, body').stop().animate({ scrollTop : $(hash).offset().top - $('.x-bar-fixed').height() });

    } );
})(jQuery);

We would loved to know if this has work for you. Thank you.

[ywoolf]

OMG. It’s perfect. Thanks so much!

[ruenel]

Hey There,

You’re welcome! We are just glad we were able to help you out.
Thanks for letting us know that it has worked for you.

Cheers.