0

I have an issue with my fixed header nav bar covering content at anchor points. I know there are a gazillion questions on this subject on this site and after researching used the solution here:

offsetting an html anchor to adjust for fixed header

On the whole the above solution works great, however it only seems to work correctly when scroll is initiated. I have set the header to .affix (bootstrap) as soon scroll happens, but when at the top of the page and header is .affix-top the above solution does not work and the header nav still covers the content.

Does anyone know a work around for this? I presume it's something today with the fact my layout is fluid and positioning when the header is affixed-top.

The site is here:

http://staging.kmashworth.co.uk

thanks

Community
  • 1
  • 1
Jordie C
  • 1
  • though I didn't go through the complete code, it seems like you need to trigger scroll on window or some other element if you want to simulate like a user scrolled on page load. you can do it like `$(window).trigger("scroll");`. – Mohit Bhardwaj Apr 18 '16 at 16:43

1 Answers1

0

As i want the header to be fixed anyway i've just position: fixed the header and then added padding-top: 120px(same height as header) to the container element below the header so the content is not covered.

Not sure if this is the best way to do it but works ok so far.

Jordie C
  • 1