Personal Portfolio Webpage - navbar issue

BartS · July 15, 2025, 10:30pm

Tell us what’s happening:

When I click “Projects” on my navbar, it doesn’t go to the top of the projects page because the navbar is in front of it. I have tried fixing it with scroll-margin-top: 7vh (navbar height), projects::before, and creating a new div above the actual projects section for it to scroll to. None of it works.

Your code so far

<!-- file: index.html -->

/* file: styles.css */

Your browser information:

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

Challenge Information:

Personal Portfolio Webpage - Build a Personal Portfolio Webpage

MostafaElbadry · July 16, 2025, 12:06am

Can you share your HTML and CSS? It looks like they’re missing from the post.

BartS · July 16, 2025, 1:05am

Whoops! Here it is!
HTML:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <title>Bart Portfolio Website</title>
  </head>
  <body>
    <nav id="navbar">
      <h1><a class="nav" href="#welcome-section">About</a></h1>
      <h1><a class="nav" href="#projects">Projects</a></h1>
      <h1><a class="nav" href="#contact">Contact</a></h1>
    </nav>
   
    <div id="welcome-section">
      <h1 id="name">Hi, I'm Bart<hr></h1>
      <h2>Not <i>yet</i> a web developer</h2>
      <p>This is a long piece of test that I can use to see how align-content (multiple lines of text) and align-items (multiple items on a single line) works</p>

      <div id="animation"></div>

    </div>

    <div id="projects-anchor"></div>
    <div id="projects">
      <h1 id="name">Projects</h1><hr>
      <h2>Check out these awesome projects!</h2>
      <p>put some boxes of projects like in the example. CSS grid? divs?</p>
      
      <div class="grid">
      
      <a class="project-tile" href="https://mtgcardsmith.com/user/Forestwalker32/cards"><img class="project-img" src="https://s3.us-east-1.wasabisys.com/mtgcardsmith-wasabi/mtgcardsmith/view/complete/thumbs/2025/7/3/1751549766549739.png" ></a>

      <a class="project-tile" href="https://scratch.mit.edu/users/bob978321/"><img class="project-img" src="https://uploads.scratch.mit.edu/get_image/user/61196505_300x300.png" ></a>

      <a class="project-tile" href="https://scratch.mit.edu/projects/884841096/"><img class="project-img" src="https://uploads.scratch.mit.edu/get_image/project/884841096_360x270.png" ></a>

      </div>

    </div>

    <div id="contact">
      <h3>Contact me!</h3>
      <p>Gmail: <a href="mailto:bscheer078@gmail.com" target="_blank">bscheer078@gmail.com</a></p>
      
      <p>freeCodeCamp: <a href="https://www.freecodecamp.org/BartScheer" id="profile-link" target="_blank">https://www.freecodecamp.org/BartScheer</a></p>
      
      <p>GitHub: <a href="https://github.com/BartDKbits?tab=repositories" target="_blank">https://github.com/BartDKbits?tab=repositories</a></p>

      <p>Linkedin: <a href="https://www.linkedin.com/in/bart-scheer/" target="_blank">https://www.linkedin.com/in/bart-scheer/</a></p>

    </div>

  </body>
</html>

CSS:

html {
  scroll-behavior: smooth;
}

  body {
  margin: 0;
  margin-top: 7vh;
}

nav {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  align-items: center;
  /* why does flex-start put it at the bottom of the navbar (and past the bottom)? */
  position: fixed;
  height: 7%;
  width: 100%;
  top: 0;
  background-color: lightgreen;
  border-bottom: 2px solid black;
  z-index: 1000;
}

#welcome-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* justify-items: center; */
  text-align: justify;
  width: 100%;
  height: calc(100vh - 7vh);
  background-color: silver;
  padding: 10px;
  margin: 0px;
  /* margin redundant */
  box-sizing: border-box;
}
#welcome-section h2 {
  margin-top: calc(10vh - 60px);
}

#animation {
  width: 15vw;
  height: 10vh;
  position: relative;
  animation: movebox 8s infinite ease-in-out;
  bottom: 35vh;
}

@keyframes movebox{
  0% {
    left: 0vw;
    top: 20vh;
    background-color: deeppink;
  }
  12.5% {
    left: -20vw;
    top: 20vh;
    background-color: crimson;
  }
  25% {
    left: 0vw;
    top: 20vh;
    background-color: orange;
  }
  37.5% {
    left: 0vw;
    top: 0vh;
    background-color: yellow;
  }
  50% {
    left: 0vw;
    top: 20vh;
    background-color: green;
  }
  62.5% {
    left: 20vw;
    top: 20vh;
    background-color: blue;
  }
  75% {
    left: 0vw;
    top: 20vh;
    background-color: purple;
  }
  87.5% {
    left: 0vw;
    top: 40vh;
    background-color: lightpink
  }
  100% {
    left: 0vw;
    top: 20vh;
    background-color: deeppink;
  }
}

hr {
  border: 1px dashed black;
}

#about hr {
  width: 100%;
}

div {
  border: 2px dotted red;
}

#projects * {
  box-sizing: border-box;
  /* padding: 0;
  margin: 0; */
}

.grid {
  display: grid;
  /* flex-flow: row wrap; */
  /* grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); */
  justify-items: center;
  align-items: center;
  justify-content: space-evenly;
  padding-bottom: 0px;
  margin-right: 10px;
  /* flex: 1; */
  gap: 10px;
}

@media (min-width: 400px) {
  .grid {
    grid-template-columns: repeat(2, 1fr);
  }
  /*make last on fit on both columns */
  /* #projects {
    height: 100vh;
  } */
}
@media (max-width: 400px) {
  .grid {
    grid-template-columns: repeat(1, 1fr);
  }
  /* #projects {
    height: auto;
  } */
}

.project-img {
  /* height: 40vh; */
  /* max-height: 80%;
  max-width: 80%;
  min-height: 40px;
  min-width: 50px; */
  height: 40vh;
  /* how are these even determined?? */
  aspect-ratio: 1 / 1;      
  /* width: auto; */
  object-fit: cover; /*idk what this does */
  border-radius: 10px;
}

#projects {
  background-color: rgb(40, 100, 200);
  color: white;
  padding-left: 10px;
  /* height: 100vh; */
  overflow-y: hidden;
  position: relative;
}

#contact {
  background-color: navy;
  color: lightcyan;
  padding-left: 10px;
}

#contact p a {
  color: lightcyan;
}

#welcome-section, #projects, #contact {
  scroll-margin-top: 7vh;
}
#projects::before {
  content: "";
  display: block;
  height: 7vh;
  margin-top: -7vh;
  visibility: hidden;
  position: absolute;
  top: -7vh;
}
#projects-anchor {
  top: -7vh;
  display: block;
  position: relative;
  height: 0;
}

Teller · July 16, 2025, 1:57am

Welcome back to the forum @BartS

Instead of scroll-margin-top try padding-top.
Great animation!

Happy coding

sanjay210 · July 16, 2025, 6:49am

You have to fix your overlapping of elements.

BartS · July 17, 2025, 2:07am

Thanks!
I don’t want to have that extra space at the top though. Is there a way to make it work without it?

BartS · July 17, 2025, 2:10am

Hi!
Are you referencing the #projects::before and #projects-anchor? I know its messy right now, I’m just trying things, these are supposed to come a little before #projects so that I will see #projects as the first thing even with the navbar

BartS · July 22, 2025, 2:18am

So does anyone know? I feel like this would be a common issue but I’m not sure

pkdvalis · July 22, 2025, 2:34am

Not sure what you mean here. Can you describe exactly what you want? Do you want the navbar to scroll up or disappar?

This is what it does for me, it does seem to be at the top of the projects page:. The navbar is on top, but that is expected, right?

BartS · July 26, 2025, 11:15am

Yes what is shown in the picture is exactly what I want!
For some reason though the top of the projects page that says projects is cut off when I click on the projects navbar. I’m using Chrome which I feel like should work normally

pkdvalis · July 26, 2025, 1:06pm

That’s what happens when I click Projects. I’m using Firefox. Maybe you can test another browser. Do you have any browser extensions enabled which might interfere? (Although I have a ton of extensions)

BartS · July 28, 2025, 8:35pm

Thats so weird, I just tried on chrome, firefox, edge, and installed duckduckgo to try it. It only worked for firefox. I don’t think its an extension issue

BartS · July 29, 2025, 2:02am

Yay! I tried using the project-anchor again, and I think I may have just forgotten to add the visibility: hide? I just removed it though and it didn’t seem to make a difference so I don’t know how I fixed it. I do have another problem though, Im basically done but I removed the borders from the divs and now suddenly theres space above and below my contact section. Also it smooth scrolls on chrome but not edge.
Updated code:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <title>Bart Portfolio Website</title>
  </head>
  <body>
    <nav id="navbar">
      <h1><a class="nav" href="#welcome-section">About</a></h1>
      <h1><a class="nav" href="#projects-anchor">Projects</a></h1>
      <h1><a class="nav" href="#contact">Contact</a></h1>
    </nav>
   
    <div id="welcome-section">
      <h1 id="name">Hi, I'm Bart<hr></h1>
      <h2>Not <i>yet</i> a web developer</h2>
      <p>It seems that some browsers work better for scrolling smoothly and scrolling to the top of the div correctly... Firefox allowed projects page to show with just the scrolling-margin-top: 7vh, but others needed the project-anchor.</p>

      <div id="animation"></div>

    </div>

    <div id="projects-anchor"></div>
    <div id="projects">
      <h1 id="name">Projects</h1><hr>
      <h2>Check out these awesome projects!</h2>
      <p>put some boxes of projects like in the example. CSS grid? divs?</p>
      
      <div class="grid">
      
      <a class="project-tile" href="https://mtgcardsmith.com/user/Forestwalker32/cards"><img class="project-img" src="https://s3.us-east-1.wasabisys.com/mtgcardsmith-wasabi/mtgcardsmith/view/complete/thumbs/2025/7/3/1751549766549739.png" ></a>

      <a class="project-tile" href="https://scratch.mit.edu/users/bob978321/"><img class="project-img" src="https://uploads.scratch.mit.edu/get_image/user/61196505_300x300.png" ></a>

      <a class="project-tile" href="https://scratch.mit.edu/projects/884841096/"><img class="project-img" src="https://uploads.scratch.mit.edu/get_image/project/884841096_360x270.png" ></a>

      </div>

    </div>

    <div id="contact">
      <h3>Contact me!</h3>
      <p>Gmail: <a href="mailto:bscheer078@gmail.com" target="_blank">bscheer078@gmail.com</a></p>
      
      <p>freeCodeCamp: <a href="https://www.freecodecamp.org/BartScheer" id="profile-link" target="_blank">https://www.freecodecamp.org/BartScheer</a></p>
      
      <p>GitHub: <a href="https://github.com/BartDKbits?tab=repositories" target="_blank">https://github.com/BartDKbits?tab=repositories</a></p>

      <p>Linkedin: <a href="https://www.linkedin.com/in/bart-scheer/" target="_blank">https://www.linkedin.com/in/bart-scheer/</a></p>

    </div>

  </body>
</html>

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  margin-top: 7vh;
}

nav {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  align-items: center;
  /* why does flex-start put it at the bottom of the navbar (and past the bottom)? */
  position: fixed;
  height: 7%;
  width: 100%;
  top: 0;
  background-color: lightgreen;
  border-bottom: 2px solid black;
  z-index: 1000;
}

#welcome-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* justify-items: center; */
  text-align: justify;
  width: 100%;
  height: calc(100vh - 7vh);
  background-color: silver;
  padding: 10px;
  margin: 0px;
  /* margin redundant */
  box-sizing: border-box;
}
#welcome-section h2 {
  margin-top: calc(10vh - 60px);
}

#welcome-section h1, #welcome-section h2 {
  text-align: center;
}

#animation {
  width: 15vw;
  height: 10vh;
  position: absolute;
  animation: movebox 8s infinite ease-in-out;  
  /* margin: auto; */
  bottom: 35vh;
  transform: translate(-50%, -50%);
}
@media (max-width: 300px) {
  #animation {
    display: none;
  }
}

@keyframes movebox{
  0% {
    left: 50vw;
    top: 75vh;
    background-color: deeppink;
  }
  12.5% {
    left: 30vw;
    top: 65vh;
    background-color: crimson;
  }
  25% {
    left: 50vw;
    top: 75vh;
    background-color: orange;
  }
  37.5% {
    left: 70vw;
    top: 65vh;
    background-color: yellow;
  }
  50% {
    left: 50vw;
    top: 75vh;
    background-color: green;
  }
  62.5% {
    left: 70vw;
    top: 85vh;
    background-color: blue;
  }
  75% {
    left: 50vw;
    top: 75vh;
    background-color: purple;
  }
  87.5% {
    left: 30vw;
    top: 85vh;
    background-color: lightpink
  }
  100% {
    left: 50vw;
    top: 75vh;
    background-color: deeppink;
  }
}

hr {
  border: 1px dashed black;
}

#about hr {
  width: 100%;
}

/* div {
  border: 2px dotted red;
} */

#projects * {
  box-sizing: border-box;
  /* padding: 0;
  margin: 0; */
}

.grid {
  display: grid;
  /* flex-flow: row wrap; */
  /* grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); */
  justify-items: center;
  align-items: center;
  justify-content: space-evenly;
  padding-bottom: 0px;
  margin-right: 10px;
  /* flex: 1; */
  gap: 10px;
}

@media (min-width: 400px) {
  .grid {
    grid-template-columns: repeat(2, 1fr);
  }
  /*make last on fit on both columns */
  /* #projects {
    height: 100vh;
  } */
}
@media (max-width: 400px) {
  .grid {
    grid-template-columns: repeat(1, 1fr);
  }
  /* #projects {
    height: auto;
  } */
}

.project-img {
  /* height: 40vh; */
  /* max-height: 80%;
  max-width: 80%;
  min-height: 40px;
  min-width: 50px; */
  height: 40vh;
  /* how are these even determined?? */
  aspect-ratio: 1 / 1;      
  /* width: auto; */
  object-fit: cover; /*idk what this does */
  border-radius: 10px;
}

#projects {
  background-color: rgb(40, 100, 200);
  color: white;
  padding-left: 10px;
  /* height: 100vh; */
  overflow-y: hidden;
  position: relative;
}

#contact {
  background-color: navy;
  color: lightcyan;
  padding-left: 10px;
}

#contact p a {
  color: lightcyan;
}

#welcome-section, /*#projects, (works regardless of comment) */ #contact {
  scroll-margin-top: 7vh;
  /* padding-top: 7vh; */
}
/* #projects::before {
  content: "";
  display: block;
  height: 7vh;
  margin-top: -7vh;
  visibility: hidden;
  position: absolute;
  top: -7vh;
} */
#projects-anchor {
  top: -7vh;
  display: block;
  position: relative;
  height: 0;
  visibility: hide;
  //border-color: green
}

BartS · July 29, 2025, 12:57pm

I added slight padding to the contact (To prevent contents from spilling out is what ai told me, don’t really know if that was the problem)

#contact {
  background-color: navy;
  color: lightcyan;
  padding: 0.1px .1px .1px 15px;
  /* margin: 0px; */
}

Thanks to everyone who helped me out on fixing the scrolling!!

system · January 28, 2026, 12:57am

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

Topic		Replies	Views
Personal Portfolio Webpage - Build a Personal Portfolio Webpage (Step 12, navbar should be always on top) HTML-CSS	9	55	January 13, 2026
Personal Portfolio Webpage - Build a Personal Portfolio Webpage HTML-CSS	2	37	January 13, 2026
Personal Portfolio Webpage - Build a Personal Portfolio Webpage HTML-CSS	3	156	October 11, 2024
Build a Personal Portfolio - Build a Personal Portfolio HTML-CSS	4	37	January 2, 2026
Portfolio - Feedback & help Code Feedback	3	487	February 6, 2021

Personal Portfolio Webpage - navbar issue

Tell us what’s happening:

Your code so far

Your browser information:

Challenge Information:

Related topics