Responsive Web Design Projects - Build a Product Landing Page

Hello guys!
There’s a request of the test that I struggle to complete. It’s " Your #nav-bar should always be at the top of the viewport."
I created an id in the style section called “#nav-bar” with position:fixed;
and created a element in html with id=“nav-bar”. If I scroll through the page, the nav bar actually stays in top… But it keeps telling me that I failed the task.
Can you help me?

  **Your code so far**
/* file: index.html */
<!DOCTYPE html>
h1 {
font-size: 40px;

#header-img {max-width:30px;}
@media (min-width:800px) {
h1 {
  font-size: 80px;

#nav-bar {

nav li {
display: inline;
nav ul {
margin: 0px;

#box-container {

<header id="header"> <h1 id="header"> <img id="header-img" src=""> Dirty sHoe

<nav id="nav-bar" >
    <li> <a class="nav-link"  href="#home"> home </a></li>
    <li > <a class="nav-link"  href="#buy"> buy </a></li>
    <li > <a class="nav-link" href="#contacts"> contacts </a></li>
  <iframe id="video" src=""> 
  <h4 id="home"> home </h4>
   <h4 id="buy"> buy </h4>
    <h4 id="contacts"> contacts </h4>
    <form id="form" action="">
      <input id="email" type="email" placeholder="type your email here" name="email">
      <input id="submit" type="submit">

  <div id="box-container"> 

/* file: styles.css */

  **Your browser information:**

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

Challenge: Responsive Web Design Projects - Build a Product Landing Page

Link to the challenge:

@BrendaCarolina you should apply this property to the header section because your navbar consists of two parts i.e nav-links and logo so you see the tree structure in the header section

Got it. Thank you so much! :smile:

1 Like

You are welcome @BrendaCarolina

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