Jump to content

Sticky Header Space

Recommended Posts

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



Link to post
Share on other sites

So I did try that but when I add: 

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.

Link to post
Share on other sites

OK figured it out!

The starting navigation


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


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 


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 by DizzyDan
Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...