1. The navbar should always be at the top of the viewport. Problem

Hello, so I have been struggling to find whats wrong with my landing page in-terms of the nav-bar being on top. It says one of the header children must be at the top border which is valid as the nav bar is inside the header. If you go inside the pen you’ll see the header placed at the bottom but I’ve also tried placing it at other locations but that didn’t help so I just left it at the end. Been stuck with this for more than 2 days now so it would be great if anyone could point out whats wrong.

pen link: https://codepen.io/aksam/pen/YzZzKPv?editors=1100

note, I would check it out on desktop if I were you, not that responsive for mobile screens yet.

I think you need to fix your HTML. You have all of the content inside the <header>. This is not semantically correct. Only the <nav> should be in the header.

Fix this first and then try to fix the test issue with the <nav>.

1 Like

Hi @aksam.rafiz12 !

I would suggest running your html through the html validator and css codepen analyzer to fix those syntax errors.

Also, for codepen you do not need to include the head tags and doctype.

I would also move your inline styles over to your css section.
Move this

style="height:2rem; width:6rem; font-size:1rem"

Once you start fixing those syntax errors that will help with the tests.

You can validate your HTML by choosing “Analyze HTML” under the down arrow in the HTML editor. Make sure the elements have both an opening and closing tag. The nav stays at the top just fine. The header needs a logo though. Also on Codepen you only need to put the HTML that is inside the body tags.

Thanks for the replies guys, I’ve managed to find a somewhat solution.

1 Like

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.