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

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.

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

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.

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.