Viewport on top issue "The navbar should always be at the top of the viewport."

I built this landing page, can someone see my code and try to figure this out

If I understand what you’re trying to do, you had your image div in the middle of your nav bar.

<!-- Header -->
    <header id="header" class="main">
        <nav id="nav-bar">
            
            <ul>
                <li><a id="nav-link" class="nav-link" href="#cars">Products</a></li>
                <li><a id="nav-link" class="nav-link" href="#video">Auction</a></li>
                <li><a id="nav-link" class="nav-link" href="#contact">Contact</a></li>
            </ul>
        </nav>
      <div class="logo">
                <img src="https://hmp.me/cfov" id="header-img" alt="logo">
            </div>
    </header>

I think this works. If not, sorry. Only 11days from day 0 of learning to code.:stuck_out_tongue:

Gotcha. Try setting the z-index of your <header> element, like this:

header {
    z-index: 999;
}

More info can be found at W3Schools Z-Index.

Thanks for trying to help although both attempts did not work, I will keep trying to figure it out

They just want you to code the nav element so that it is ALWAYS at the top of the user’s viewport. The viewport by the way, is the area on a display screen for viewing information.

For this, you need to use position: fixed;
BUT, after that, it doesn’t look so good when you scroll down with it on top. So add a background-color to it. Lightgray imo should be good. Finally, add a z-index of a certain number that is bigger then every other z-index. You can put a 1000 to be sure. If you do not know what z-index is, well it is:

" The z-index property specifies the stack order of an element.
An element with greater stack order is always in front of an element with a lower stack order."

Source: W3Schools

Keep up the coding :smiley:,
-Tech.

P.S: I think you should’ve posted that in the “HELP” section ^^.

1 Like