Personal Portfolio Webpage - Build a Personal Portfolio Webpage (Cannot complete last step)

HTML-CSS
1

I’m having problems with the last requirement “the navbar should always be at the top”. Out of desperation I googled and I found out the freeCodeCamps tutorial on how to make it stay at the top, and it was exactly what I had.

HTML:

 <header id="header">
        <nav id="navbar">
            <ul>
                <li><a class="nav-link" href="#welcome-section">Welcome</a></li>
                <li><a class="nav-link" href="#projects">Projects</a></li>
                <li><a class="nav-link" href="#Contact Me">Contact Me</a></li>
        </nav>
    </header>

CSS:

header {
    margin-top: -1rem;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    z-index: 10;
    background-color: var(--light-color);
    color: var(--dark-color);
    padding: 0 1rem;
}

What’s the problem with this code? Position: fixed and having the id should be already enough for it to work, including top: 0;

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/108.0.0.0 Safari/537.36

Challenge: Personal Portfolio Webpage - Build a Personal Portfolio Webpage

Link to the challenge:

2

would be good if you shared all the code, not just a snippet.
My guess is to try to remove the margin-top setting.

1 Like
3

Did you link in the stylesheet correctly? Make sure you don’t have top margins on either the #navbar or the list inside the #navbar.

4

It was margin top, thanks!

5

I shared only those 2 snippets because there were nothing else that could be causing the issue, I knew it had something to do with the code I shared, and I guessed right.

6

we ask people to share all the code because it is sometimes a browser issue and not having all the code means I can’t test it myself.

2 Likes
7

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