Tell us what’s happening:
I am stuck on trying to get my #navbar to be fixed to the top of the viewport.
Your code so far
<!-- file: index.html -->
<header id="header">
<link rel="stylesheet" href="styles.css" />
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<nav id="navbar">
<ul id="navbar">
<li>
<a href="#welcome-section">Welcome Section</a>
</li>
<li>
<a href="#projects">Projects</a>
</li>
</ul>
</nav>
<div id="welcome-section">
<h1>Welcome, My Name is Christian</h1>
</div>
<div id="projects">
<div class="project-tile">
<a href="">Social Media</a>
</div>
</div>
<div id="profiles">
<a id="profile-link" target="_blank" href="https://forum.freecodecamp.org/u/cmb1506/summary">Christian's fCC Profile</a>
</div>
</header>
/* file: styles.css */
.navbar {
position: fixed;
width: 100%;
top: 0;
left: 0;
}
@media maxwidth(750px) {
background: blue;
}
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/126.0.0.0 Safari/537.36
Challenge Information:
Personal Portfolio Webpage - Build a Personal Portfolio Webpage