Problem with Product Landing Page

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.

https://codepen.io/33P/pen/dyYJXBa

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.

1 Like

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

2 Likes

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.

1 Like

@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.

2 Likes

@levlaz It didn’t work. Thank you anyway!

@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.

1 Like

@Sky020 Great! It worked. Even though less-elegant. Thank you so much.

@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:

  1. Finalise the layout of your design. No Code. Just have a picture in your mind/on paper.
  2. 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 an h1 || h2 for accessibility.

Go through your CSS, and make use of the built-in analyser and formatter every now and again.

1 Like