hello my friends
i compelete this challenge but there is still two things that i don’t like about my work and they are:
1.when width of the page in small my nav bar goes to the top and its ok, but when you click on any topic in nav-bar it goes under the nav-bar
what can i do?
2. why i could not do “position:sticky;” for my nav bar to avoid problem number 1? (if you have time please explaine it to me cause i didn’t understand why)
Hi, the anchors appearing behind the nav is a pretty common annoyance. One way to solve it is to create invisible elements above each anchor position, and then have the nav links point to those.
For example:
<!-- In the nav -->
<a href="#section1">Section 1</a>
...
<!-- In the main content -->
<span id="section1" style="position: relative; top: -60px"></span>
<h2 id="section1-actual">Section 1</h2>
The span “section1” is invisible and takes up no space. It’s positioned 60px above the actual section1 heading. If the nav is 60px high, then this will perfectly offset that difference. In your project, the nav seems unusually tall on mobile! Maybe it would be better to make it collapsible so it doesn’t cover half the screen. If you need to refer to the heading by its id, make sure to use “section1-actual”, otherwise you’ll get the empty span.
position: sticky isn’t supported on older browsers, so if you use it, you run the risk of some users seeing a broken site. Also, sticky just keeps the content on the screen – it still allows the content to scroll as long as it doesn’t scroll off-screen. A sticky nav is supposed to stay at the top of the screen no matter what, so position: fixed is a better choice. For more info, see position - CSS: Cascading Style Sheets | MDN.
1 Like
tnx for you explanation
here’s the same project with “position:sticky;” style for nav bar
- in left side nav-bar (not in @media situation), it doesn’t sticke to the top of the screen
- in top nav-bar (in @media situation), content of page goest under it
i saw similar projects that have not my problem but i cant find the solution
The page content going underneath the nav is what you want, right? Or do you want the nav to scroll up off-screen?
1 Like
when nav bar is shown in top of page: i want the content pass underneath the navbar when i scroll down the page, but when i click on any topic in nav bar, its contents shows lower than navbar
when nav bar is shown in left side of page: i want navbar to stick to left-top of the page.
Ok, so you want to use position: fixed in both mobile and desktop screen sizes then. The way you have it now works fine. The only fix you need is to make the link content not covered by the nav. The problem is when you link to a part of the same page, the browser automatically scrolls that part of the page to the top of the screen. You want it to scroll a little bit below the top of the screen, leaving enough vertical space for the nav to not cover it. In my first reply, I outlined a way you can do that.
1 Like
thank you very much for your time
i’ll do that 
you can use absolute also i think
position: absolute means relative to the nearest relatively-positioned parent. In specific cases, it can behave the same as position: fixed. But you shouldn’t rely on that behavior if what you want is for the item not to scroll with the rest of the page – that’s what fixed positioning is for.
<body>
<!-- This div doesn't scroll with the page -->
<div style="position: fixed;"></div>
<!-- These 3 divs scroll with the page -->
<div style="position: absolute;"></div>
<div style="position: relative;"></div>
<div></div>
<!-- This is a div that lets you scroll content inside it -->
<div style="overflow-y: scroll; position: relative;">
<!-- This div can scroll inside the parent div -->
<div></div>
<!-- This div doesn't scroll when the parent div scrolls
but it does scroll when the whole page scrolls -->
<div style="position: absolute;"></div>
</div>
</body>
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.