[SOLVED] Scrolling buttons on portfolio project make navigation cover up content

1

Here is my codepen: https://codepen.io/mixolydia97/pen/KRbgZg

I’ve spent a really long time on this and I’ve gotten a bit stuck with the requirement that you should have buttons that scroll to the various parts of the website. My issue is that I would like the scroll buttons to scroll so that the nav doesn’t cover the top of whatever section was scrolled to. Currently I only have the “top” and “portfolio” scroll buttons working. The top button works fine because I can make the anchor fixed to the top of the page. The portfolio button doesn’t look as nice because, when it scrolls, it covers up part of my first project.

I tried to add a lot of padding or margins to the top of the portfolio but it made everything look too spaced-out. I also tried putting the anchor with id=“portfolio” at the end of the previous section but that didn’t really work either. I was wondering if there’s a way to do what I want with just HTML/CSS. I would appreciate any help and any critique of my portfolio so far. Thank you.

2

I really like the design idea .I would move the navigation buttons in the titlebar and make things full screen to resemble an old terminal

3

When you say move the navigation, where should I move it to? I originally played with the idea of making it all look like a terminal but then I felt the images wouldn’t work with a terminal. So I instead made it look like NeXTSTEP/WindowMaker. Basically what I want to do is make the scroll buttons scroll to about 4em above the content. But I’m not sure how.

4

I found a pretty good solution. It’s only working for screens smaller than 600px right now, but it seems pretty good. I had forgotten what relative positioning meant. What I did was make an anchor with the id “portfolio” and placed it right before my portfolio section. Then I made the anchor position relative and set top: 3.5em (since the height of the menu is 3em). I’m still working on moving everything from px measurements to em but so far it’s looking good.