Can not pass personal portfolio challenge

HTML-CSS
1

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.

2

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

3

It means that the element must be sticky.

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

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

5

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

1 Like
6

I’ve written

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

and that worked. Thanks!

7

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