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

HTML-CSS
1

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

2

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:

3

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.

1 Like
4

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

5

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

3 Likes