Content hidden by sticky header when using Anchor Links

[ladybirdenterprises]

Hi there,

I have an issue whereby when I use anchor links with my sticky header, the content ends up under the nav bar. I’ve searched the forums and applied 5 different fixes, both CSS and Java options and neither seem to work for me and I’m not sure why. I’ve even tried listening to nothing but Five Finger Death Punch albums for the last three hours, that hasn’t helped either

I’ve not got a one-page layout, so that’s not the issue. If you could help me please, I would appreciate it. I’ve attached an image of what is happening and you can visit my site too (as it’s live) on the following link. If you go to ‘Shop’ and select one of the items from the dropdown, you’ll see the issue: https://www.sageaccountssolutions.co.uk/sage-software-and-stationery/

Thanks for your help.

Ant

[Joao]

Hi There,

Please try adding the following code to Theme Options JS

jQuery( function($){

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

e.stopPropagation();

$('html, body').stop().animate( { scrollTop : $($(this).attr('href')).offset().top - $(this).parent().height()  }, 'linear' );

} );

} );

Let us know how it goes

[ladybirdenterprises]

Hi Joao, I’m afraid that didn’t make any difference. Sorry, the content is still in the same place under the header: https://www.sageaccountssolutions.co.uk/sage-software-and-stationery/#sage-software

Ant

[basanta]

Hi There,

Please use this js instead of the top jas that given by @Joao.

jQuery( "#menu-item-4771" ).click(function() {
  jQuery("#sage-software").css("padding-top", "100px");
}); 

Hope this helps!

I would like you to suggest you to increase the top padding of the each section so that it will fix the issue instead of adding JS code. As the Header is fixed top it will overlap the section which have less padding.

Thanks

[ladybirdenterprises]

Thanks @basanta, I agree it may be best if I just go with increasing the padding at the top of each of the sections. I’ll do that, thank you and everyone else for their help.

Ant

[Joao]

You are welcome!