Hi all! It seems I have isolated a problem here. I have a fixed header and nav-bar. I also have three links in the nav-bar that point to three separate sections of the page.
Problem is, when I click on these three elements in the nav-bar, they send the content to the top of the page, that is, just behind the header and the bar.
I know it must be just a nudge but I can’t seem to find the thing.
Thanks in advance.
I enclose my fork.
Could you help me understand why you’re using fixed positioning here? I think this is the root cause of the issue. It does not seem to be necessary since it appears that your intent is to make the header stay on top of the body.
Thank you. The guidelines of the project specify that the header and bar shouldn’t move when you’re navigating the page. I think that’s alright, I’m just looking for some way to take the referred content below the fixed header when it is called.
Maybe a head/body location problem?
Hello there,
There are many ways to get around this, but this is the most elegant. https://www.caktusgroup.com/blog/2017/10/23/css-tip-fixed-headers-and-section-anchors/
Hope this helps
That makes sense, I guess my point is that by default the header does not move. I tend to use fixed
when I want things to remain in place in a “non-standard” location.
When you have a simple, horizontal layout like this, then you don’t need to use fixed positioning.
I would try just setting the width of your header and body to 100% so this way they naturally flow after each other.
@Sky020 Hi! Elegant solution indeed. I’m gonna try this, and if it works I’ll mark your post as the solution.
@levlaz I’m gonna try to do that, but I remember having done something similar that didn’t work. Thank you I’ll try it all the same.
@Sky020 Hi again! Your solution works on the first link to the page, it appears below the header and bar. Thing is, I can’t make it work for the two other links, which appear again under the header. I’ve tried to replicate the code with id change but it doesn’t work.
Maybe I’m deserving not such an elegant solution? Is it a valid question?
My fork so far:
https://codepen.io/33P/pen/dyYJXBa
Your Pen is not working as expected, for me. Something has broken the navbar, in my view.
Just so you are aware of the less-elegant solution: Add margin-top
to the heading so that it appears below the nav.
@Sky020 I bother you once more. Given that even with the changes applied I still can’t pass the tests, and since I have a broken header, wouldn’t it be better to start everything from scratch? You know more than I know, so I’m asking for your advice.
That is entirely up to you.
I would not think there is a need to start again. Perhaps, starting again would be useful for you to cement some HTML and CSS understanding. However, the main focus for you should be to:
- Finalise the layout of your design. No Code. Just have a picture in your mind/on paper.
- Delete anything that does not make sense. Eg:
- An image inside an
h1
element. - A
nav
element with nothing inside of it. - The use of multiple
strong
tags that could be anh1
||h2
for accessibility.
Go through your CSS, and make use of the built-in analyser and formatter every now and again.