Sticky Header Space

[DizzyDan]

I am developing a single page website that scrolls to each section when selected, live example: http://sandbox.digitango.com/

The issue I am having is with the sticky header, when you click the first link "Why AMAC" it will send you to the first section BUT when the header changes to fixed position it covers the content.

I searched google reading a ton of articles but nothing seemed to address this issue, maybe I am missing the correct term for what my issue is.

Is there any solution you know of that can fill the gap for when the header changes to fixed?

- Image one - what the problem looks like

- Image two - how I would like it to look

[dsonesuk]

You need to add padding or margin to top of selected section.

[DizzyDan]

So I did try that but when I add: 

#why-amac{
margin-top: 100px;
}

And click that same "Why AMAC" link the header still covers that same area but if I scroll up the space will be there.

[DizzyDan]

OK figured it out!

The starting navigation

#sticky-header

 Is a block level element, which is all fine and dandy till you scroll past the menu and I add the class

.stuck

With the style of 

position: fixed;

Now I want it to be fixed so the menu stays with the user as they scroll BUT fixed makes it lose the block level element causing the space change that made it not line up correctly.

Sooooo, now for the solution!

I added

float: left; 

To my starting styles for 

#sticky-header

AND added

padding-top: 140px;

To the next element to compensate for the height of the now fixed menu and viola!

If you can think of a better alternative let me know!

Edited July 26, 2017 by DizzyDan