Hello everyone!!
For some reason my nav links are acting a little weird. When I click the link it will jump to the section, but it shifts it under the navbar. How do I fix this?
Here is a link to my work in progress technical doc: https://codepen.io/jacqthedog/pen/abLbEVK
Ignore the content, it’s all nonsense I wrote for fun.
Thanks in advance 
because you have nav position fixed, and main position relative.
Ok I changed the main position to absolute (although I don’t fully understand the difference between the two). It works now when the browser is greater than 800px but when it is less than 800, the sections jump below the nav bar again?
I’m not quite sure what’s the cause. My best guess is because nav position is fixed, and main position is absolute. Because nav defined first in the html, it takes more priority, while absolute, although it’s taken out from the document flow, its position is still refer to its nearest element, which is in this case, the nav.
https://developer.mozilla.org/en-US/docs/Web/CSS/position
I presume you’re trying to force those two to be side by side because by default they are one on top of another. It’s because those two elements are html block element, not inline element.
Creating layout with position property is outdated and difficult, IMO. Position absolute is rarely used, most of the time only used for navigation links/bar that keep sticking on screen however far down a user scroll.
Search for Flexbox and Grid cheatsheet. It’s easier to control the layout of your web with those. I myself, if I have to stick to a certain big-picture layout, prefer to use grid with grid-template-areas, and use flex for the inner elements within those grid areas.
Google, or refer to MDN:
https://developer.mozilla.org/en-US/docs/Web/CSS?retiredLocale=id
Thanks for the info!! It’s good to know the position property is outdated now, I agree that flexbox and grid are easier. Although in this case, since I do want the navigation bar to be locked on the left I think position property is the way to go.
I ended up adjusting my media query so the navigation bar is absolute instead of fixed - pretty easy workaround
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.