Navbar issue on project

I can’t get the navbar to always be at the top of the viewport. Where can I find the answer? How am I this stupid? I’ve been looking for this for an hour. I’m editing out the cursing.

Hi @jonjames1986 !

The error message is telling you that the
#header or one of its children should be at the top of the viewport

The issue is with your html structure.

You shouldn’t use an h1 and place the img tag and navbar inside of it
h1-h6 should only be used for headings.
not generic containers like divs

I would change those h1 tags to header tags, and get rid of the extra set of header tags in the middle here

  <nav id="nav-bar">
    <li><a href="#history" class="nav-link">History of Glaciers</a></li>
    <li><a href="#formation" class="nav-link">Formation of Glaciers</a></li>
    <li><a href="#evolution" class="nav-link">Evolution of Glaciers</a></li>

You will also need to get rid of the style tags in your css.

When I make those changes then the test passes for me

None of that makes sense. I must be too stupid to do this. Nothing you said makes sense to me. and why do I need to get rid of the style tags?

Well, you are not stupid.

I was trying to phrase it in a way without giving you the full answer. :grinning:
But the reason why you needed to restructure your html is because the test was looking for the html element with the header id or one of its children to be at the top.
You had created an extra level of nesting so the test was failing.

Once you get rid of the style tags here

  #nav-bar {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
@media (min-height: 400px) {
  nav-link {
    font-size: 10px;
    display: flex;

then the test will pass.

Style tags are html tags.
So they don’t belong in your css.
Only css belongs there.

Plus, now that you are building projects you should not use style tags.
There is a concept in programming called the separation of concerns.
You should keep your HTML and CSS in separate sections to create cleaner code.

You’re not stupid to learn all of this.

It is normal to be confused in the early stages of learning.
Plenty of people have struggled with the projects.

I fucked up. I tried to reverse something and it went back too far. I’ve got to do this all over again.

I don’t think you need to start over.

The error message is telling you that navbar is not defined.
It looks like you deleted the entire navbar.
If you put that back where it was then it should pass

I also found this popular video on HTML by freeCodeCamp.
It is a 30 minute video where you code a small webpage.
Hope it helps you feel more confident with HTML.

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