Technical Documentation Page - Build a Technical Documentation Page - Not passing two tests

HTML-CSS
1

Tell us what’s happening:
I’m not passing two of the tests required and I am trully not sure at this point. I’ve revised it many times and can’t seem to find the issue. I also tried different browsers and it’s stil not working. These are the two test I’m missing and below I will incluse my code.

Thank you in advance! (If needed, I can include my css aswell.)

ERRORS:
None of your header elements should be empty.

Each .nav-link should have text that corresponds to the header text of its related section (e.g. if you have a “Hello world” section/header, your #navbar should have a .nav-link which has the text “Hello world”).

HTML 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>Lorem Ipsum</title> 
</head>

<body>
    <nav id="navbar">
      <header>Lorem Ipsum</header>
      <a class="nav-link" href="#introduction">Introduction</a>
      <a class="nav-link" href="#topic_1">Topic 1</a>
      <a class="nav-link" href="#topic_2">Topic 2</a>
      <a class="nav-link" href="#topic_3">Topic 3</a>
      <a class="nav-link" href="#topic_4">Topic 4</a>
      <a class="nav-link" href="#topic_5">Topic 5</a>
    </nav>


<main id="main-doc"> <!--MAIN-->
    <section class="main-section" id="introduction">
      <header>Introduction</header>
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

          <code>Quote Here</code>

            <ul>
            <li></li>
               <li></li>
               <li></li>
               <li></li>
               <li></li>
               <li></li>
            </ul>

       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Tempor id eu nisl nunc mi ipsum faucibus vitae. Ultricies tristique nulla aliquet enim tortor at auctor. Est ullamcorper eget nulla facilisi. In ornare quam viverra orci sagittis.</p>
       <a class="top" href="#top">Back to Top</a>
    </section>

    <section class="main-section" id="topic_1">
       <header>Topic 1</header>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Faucibus vitae aliquet nec ullamcorper sit amet risus. At auctor urna nunc id cursus. Nisi vitae suscipit tellus mauris a diam maecenas. Vitae tempus quam pellentesque nec nam aliquam.</p>

          <code>Quote Here</code>

       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Mattis enim ut tellus elementum sagittis vitae et leo. Justo laoreet sit amet cursus sit amet. Ullamcorper eget nulla facilisi etiam. Volutpat odio facilisis mauris sit amet.</p>
       <a class="top" href="#top">Back to Top</a>
    </section>

        
    <section class="main-section" id="topic_2">
       <header>Topic 2</header>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Id eu nisl nunc mi ipsum faucibus vitae aliquet. Quis enim lobortis scelerisque fermentum. Pellentesque id nibh tortor id aliquet lectus proin. Dolor sit amet consectetur adipiscing elit duis tristique sollicitudin nibh.</p>

          <code>Quote Here</code>

       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eu nisl nunc mi ipsum faucibus vitae aliquet nec. Aenean vel elit scelerisque mauris pellentesque pulvinar. Pharetra magna ac placerat vestibulum lectus mauris ultrices eros in.</p>
       <a class="top" href="#top">Back to Top</a>
    </section>
    
    <section class="main-section" id="topic_3">
       <header>Topic 3</header>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

            <code>Quote Here</code>

       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Tempor id eu nisl nunc mi ipsum faucibus vitae. Ultricies tristique nulla aliquet enim tortor at auctor. Est ullamcorper eget nulla facilisi. In ornare quam viverra orci sagittis.</p>
       <a class="top" href="#top">Back to Top</a>
    </section>

    <section class="main-section" id="topic_4">
       <header>Topic 4</header>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ornare suspendisse sed nisi lacus. Facilisis leo vel fringilla est ullamcorper eget nulla facilisi. Gravida cum sociis natoque penatibus et magnis dis parturient.</p>

          <code>Quote Here</code>

       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Egestas dui id ornare arcu odio ut sem. Et leo duis ut diam.</p>
       <a class="top" href="#top">Back to Top</a>
    </section>

    <section class="main-section" id="topic_5">
       <header>Topic 5</header>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Suspendisse faucibus interdum posuere lorem. Egestas quis ipsum suspendisse ultrices gravida dictum fusce. Nunc eget lorem dolor sed viverra ipsum nunc aliquet bibendum. Sit amet purus gravida quis blandit turpis cursus. Facilisi nullam vehicula ipsum a arcu cursus vitae congue. Sed libero enim sed faucibus turpis in eu mi.</p>

          <code>Quote Here</code>

       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Mattis enim ut tellus elementum sagittis vitae et leo. Justo laoreet sit amet cursus sit amet. Ullamcorper eget nulla facilisi etiam. Volutpat odio facilisis mauris sit amet.</p>
       <a class="top" href="#top">Back to Top</a>
    </section>
  </main>
</body>

</html>

:root {
  --border-color: #4d4e53;
  --hover-color: #DADADC;
}


* {
  font-family: 'Courier New', Courier, monospace;
  font-size: 18px;
  background-color: #f5f5f5;
  box-sizing: border-box;
  
}

body {
  position: relative;
  margin: 0;
  padding: 0;
}

#navbar {
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  max-width: 250px;
  min-width:250px;
  border-right: 2px solid var(--border-color);
}

#navbar header {
  white-space: nowrap;
  font-size: 28px;
  font-weight: bold;
  border-bottom: 1px solid var(--border-color);
  padding: 10px;
  text-align: center;
}

.nav-link {
  display: block;
  color: #000;
  text-decoration: none;
  font-size: 20px;
  text-align: left;
  padding: 10px 30px 10px 30px;
  border-bottom: 1px solid var(--border-color);
}

.nav-link:hover {
  background-color: var(--hover-color);
}

.nav-link:visited {
  color: #000;
}

.nav-link:last-of-type{
  border-bottom: none;
}

#main-doc {
  position: absolute;
  margin-left: 260px;
  padding: 20px;
  margin-bottom: 110px;
}

.section-header {
  padding-top: 20px;
}

.main-section header {
  font-size: 24px;
  font-weight: bold;
}



li, code {
  display: none;
}

.top {
  display: none;
}


/*-----------MEDIA QUARY-----------*/

@media (max-width: 700px) {
   
#navbar {
  visibility: collapse;
}

#main-doc {
  margin-left: -10px;
}
 
.top {
  display: block;
  margin-bottom: 20px;
  font-size: 0.8rem;
  color: #4169e1;

}

.top:visited {
  color: #4169e1;
}

.top:hover {
  color: #9370db;
}

}
2

I FOUND THE ISSUE!

As part of my @media, I put my nav bar to be visibility: collapse; and that did not allow to pass on of the requierments that you MUST SEE the nav bar.

Thanks for the help reguardless. Hopes this helps someone in the future.

3

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