SOLVED: Fixing navbar to top of viewport

HTML-CSS
1

Hey all,

Working on the Personal Portfolio Webpage Project on the Responsive Web Design module.

I have all tasks complete except for 11: THE NAVBAR SHOULD ALWAYS BE AT THE TOP OF THE VIEWPORT.

I fixed the position and put “top: 0px;”

What am I missing?

  **Your code so far**

/* file: index.html */
<!DOCTYPE html>

<html lang="eng">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width-device-width, initial-scale=1.0">
<title>Personal Portfolio Webpage</title>
<link rel="stylesheet" href="./styles.css">
<head>

<body>

<!-- START NAV BAR -->
<header id="header">

<img
    src="https://i.pinimg.com/736x/c7/a1/f3/c7a1f3ff492f07a372b6cd42ded28537.jpg"
    alt="D_logo"
    id="D_logo"
    width="300px" />

<nav id="navbar">

<h3> Dylan Ratell
&nbsp; &nbsp; &nbsp;

<a class="nav-link" href="#welcome-section"> Hello </a>
<a class="nav-link" href="#projects"> Portfolio </a>
<a class="nav-link" href="#skills"> Skills </a>
<a class="nav-link" href="#contact"> Contact </a>
</h3>

</nav>  
</header>
<!-- END NAV BAR -->


<!-- START WELCOME SECTION -->
<section id="welcome-section">

<h1>Dylan Ratell</h1>
<h2>Software Developer</h2>

</section>
<!-- END WELCOME SECTION -->


<!-- START PROJECTS SECTION -->
<section id="projects">
<h3>Portfolio</h3>

<div class="projects-grid">
<nav id="projectsbar">

  <a id="freecodecamp-link" class="project-tile" target="_blank" href="https://www.freecodecamp.org/Dylan_Ratell">
  </a>

  <a id="profile-link" class="project-tile" target="_blank" href="https://github.com/Dratell">
  </a>

  <a id="hackerrank-link" class="project-tile" target="_blank" href="https://www.hackerrank.com/dylanratell">
  </a>

</nav>
</div>
<!-- END PROJECTS SECTION -->


</body>


</html>  

/* file: styles.css */
/* START WELCOME SECTION */
#welcome-section {
width: 100%;
height: 100vh;

position: absolute;
top: 10vw;
left: 0vw;
z-index: 2;
}
/* END WELCOME SECTION */

/* STAR NAV BAR */
header {
position: fixed;
top: 0px;
width: 100%;

height: 19px;
padding: 25px 0px;

display: flex;
justify-content: space-between;
align-items: center;

background-color: black;
opacity: 0.7;

z-index: 5;
}

/* START FOR MOBILE PHONES */
@media only screen and (max-width: 800px) {

header {
  position: absolute;
  top: 0px;
  width: 100%

  height: 2vw;
  padding: 25px 0px;

  display: flex;
  justify-content: space-between;
  align-items: center;

  background-color: blaack;
  opacity: 0.7;

  z-index: 5;
}
}

  **Your browser information:**

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/15.2 Safari/605.1.15

Challenge: Build a Personal Portfolio Webpage

Link to the challenge:

1 Like
2

Hi @dylanratell

They want you fix your navbar <nav></nav> but try to fix steps in order, your problem now it is this one:
Your #navbar element should contain at least one a element whose href attribute starts with #.
I hope it helps. Happy coding!

1 Like
3

Thank you! I keep getting lost in the sauce. :slight_smile:

4

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