DizzyDan Posted July 26, 2017 Share Posted July 26, 2017 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 comment Share on other sites More sharing options...
dsonesuk Posted July 26, 2017 Share Posted July 26, 2017 You need to add padding or margin to top of selected section. Link to comment Share on other sites More sharing options...
DizzyDan Posted July 26, 2017 Author Share Posted July 26, 2017 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. Link to comment Share on other sites More sharing options...
DizzyDan Posted July 26, 2017 Author Share Posted July 26, 2017 (edited) 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 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now