Help needed with CSS, any ideas?

#1

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.

Here’s the codepen link to see what I’m doing … https://codepen.io/MJFoster/pen/QjpwQX

#2

Hi there,

I believe what you’re trying to achieve, i.e. scrolling at the correct page position, can be achieved through JavaScript.

I’ve added a few functions to help you in that regard.

You can check MDN for the functions docs.

All the best!

1 Like
#3

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.

#4

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?

#5

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%)

#6

It may be possible to do this with only CSS but it will require much more complex rules.

I believe JS is the easier solution.

#7

No you cant Sorry, That why you have JavaScript , you can easily do it with jquery

#8