Can not pass personal portfolio challenge

Hi there! I can not pass the final test in personal portfolio challenge. Test always ends up with mistake and it shows text like this: “The navbar should always be at the top of the viewport”. But it is at the top! I don’t know what i’ve done wrong. Please, help.
My html

<header class="header">
            <nav class="navbar" id="navbar">
                <a href="#welcome-section" class="navbar__link">About</a>
                <a href="#projects" class="navbar__link">Work</a>
                <a href="#contact" class="navbar__link">Contacts</a>
            </nav>
        </header>

My css:

.header {
    background-color: var(--light-background);
    min-height: 100px;
    max-height: fit-content;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 10px 40px;
    font-size: 34px;
    z-index: 100;
}

@media screen and (max-width: 700px) {
    .header {
        justify-content: center;
    }
}

.navbar__link {
    text-decoration: none;
    color: var(--dark-gray);
    font-weight: 550;
}

.navbar__link:not(:last-child) {
    margin-right: 10px;
}

Thank you in advance.

Can you send us the link to your live project, so we can see the errors?

It means that the element must be sticky.

.header {
  position: sticky;
  top: 0;
}

I was testing and the position can also be fixed.
So, share your live project to see the error.

Ok, found the error.
You need to apply the position directly to the navbar. (nav, .navbar or #navbar )

1 Like

I’ve written

.navbar {
  position: fixed;
  top: 25px; /*could have written any reasonable value here*/
}

and that worked. Thanks!

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