In order to complete the single page app, I decided to take my multi-page portfolio site I"ve been working on and convert it into a single scrolling page.
In this effort, I can’t seem to find a good way to position the screen correctly on my href’s that link to id’s on the page. This should be simple, so I think I’m just not getting something here.
I’ve background colored ‘red’ the elements in question so I can easily see what’s happening. Whether I use ‘padding’ or ‘margin’ adjustments to either the top or bottom or +/- values on these styles, I can’t seem to get the
elements to display with nice spacing below the fixed top banner.
Your link is working, but it’s scrolling the page top such that the desired heading is located under your main “fixed” banner. If you were to disable the ‘fixed’ CSS on it, you’d see what I mean.
I don’t have a quick CSS solution for you but I would suggest using JS to position the scrolled page using an onClick event on your hyperlinks. Scroll the page so that header element is at the top, minus the height of the banner.
Yes, I tried that but the JavaScript was not being interpreted. I know JavaScript is turned on in my browser, and I should not need any link for this since the script is in line.
Can’t this be done without JavaScript, just using CSS?
try to comment out <section class="wrap-top"> line 36 , 60 … , that might be you first step
writing everything (html css js) in one file is not good for readability…
updated lines…
try to get rid of huge paddings (25%, 55%)