Build a Technical Documentation Page

Hey! I “passed” this project, but I’m wondering how I can make my navbar scroll when the screen is shorter than the navbar. Thanks!

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Technical Documentation Project" />
    <title>Intro to Fly Tying</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./styles.css">
  </head>
<body>
  <nav id="navbar">
    <header>Intro To Fly Tying</header>
    <ul>
      <li><a href="#introduction" class="nav-link">Introduction</a></li>
      <li><a href="#fly_tying_tools" class="nav-link">Fly Tying Tools</a></li>
      <li><a href="#selecting_materials" class="nav-link">Selecting Materials</a></li>
      <li><a href="#preparing_your_workstation" class="nav-link">Preparing Your Workstation</a></li>
      <li><a href="#getting_started" class="nav-link">Getting Started</a></li>
      <li><a href="#requisite_code_elements" class="nav-link">Requisite Code Elements</a></li>
    </ul>
  </nav>
  <main id="main-doc">
    <section class="main-section" id="introduction">
      <header>
        <h2>Introduction</h2>
      </header>
      <p>If you're here, you've probably already stumbled down the rabbit hole of fly fishing. Or, like famed thief and musical prodigy Edwin Rist, you've become enamored with an arcane and niche craft for reasons beyond your conscious understanding.</p>
      <p>Whatever has compelled you to this place, we hope to be able to help you find you bliss at the vise. Fly tying isn't easy and don't let anyone tell you that it'll save you a buck on tying flies. However, with the right tools, knowledge, and attitude, tying flies can be a peaceful and gratifying past-time.</p>
    </section>
    <section class="main-section" id="fly_tying_tools">
      <header>
        <h2>Fly Tying Tools</h2>
      </header>
      <p>As is the case with most hobbies, fly tying will require some specialty tools. There are extreme purists within the craft who tie "in hand," which means the only tools they use are scissors. And, before online shopping and the fishing accessibility we enjoy today, there were enterprising tyers who created their own tools out of odds and ends.</p>
      <p>Fortunately, the information here is dedicated to all-comers, not just extremists; and we no longer have to rely on household detritus to access the tools of our trades</p>
      <p>At the very least, you'll need the following tools to start tying:</p>
      <ul>
        <li>Scissors</li>
        <li>Bobbin</li>
        <li>Whip finisher</li>
        <li>Bodkin</li>
        <li>Vise</li>
      </ul>
    </section>
    <section class="main-section" id="selecting_materials">
      <header>
        <h2>Selecting Materials</h2>
      </header>
      <p>Historically, the materials used were very few and were likely locally available to the early tyers and anglers of England, Scotland, and New Englad. At the very least, one needs hooks, feathers, thread, and a little fur.</p>
      <p>As is the case with most things in this world, much has changed with time.An extraordinary number of exotic animal products and synthetic materials are used to tie all sorts of flies. While these are widely available online, best practice dictates that a tyer inspect their materials prior to purchase. Best practice is only possible if you live with the luxury of a nearby fly shop that stocks tying materials. If you find yourself so blessed, head down to your shop and handle some of the materials you'll be using. Otherwise, don't sweat it! Ultimately, you'll buy a kit, such as <a href="https://hareline.com/item?phrase=&category=&line=Hareline+Fly+Tying+Kits&stockcode=TKIT">this one</a> from Hareline</p>
    </section>
    <section class="main-section" id="preparing_your_workstation">
      <header>
        <h2>Preparing Your Workstation</h2>
      </header>
      <p>Before beginning to tie it's important to prepare your work station. Many are the implemets and materials you'll need to tie your flies and most are exceptionally small or delicate, so having them handy is a big timesaver. It's frustrating to be looking for your next material, bobbin swinging from the hook, a hand pinching whatever you last tied in.</p>
      <p>Before you start your next tying project, review the recipe for that fly and clear your tying station of all but the needed materials; thread your bobbin with correct thread, and have any other tools you may need visible and within reach. Flies are sort of miraculous in the they're held together only through friction and tension (and the ocassional drop of super glue.</p>
    </section>
    <section class="main-section" id="getting_started">
      <header>
        <h2>Getting Started</h2>
      </header>
      <p>Congrats, you've gathered your materials, tools and prepared your tying station. You're ready to make flies!</p>
      <p>Make several thread wraps just back from the hook eye toward the bend. Once the tail and working ends of your thread are securely captured by wraps, snip off the tail and follow the recipe!</p>
    </section>
    <section class="main-section" id="requisite_code_elements">
      <header>
        <h2>Requisite Code Elements</h2>
      </header>
      <p>It's important to note that this page was constructed using <code>body</code>, several <code>header</code> tags, a <code>nav</code> element, and <code>section</code> and <code>header</code> elements to give the <code>nav-link</code> links destinations.</p>
    </section>
  </main>
</body>
</html>
@media (prefers-reduced-motion: no-preference) {
  * {
    scroll-behavior: smooth;
  }
}

@media  (max-width: 815px)
#navbar {
    background-color: white;
    position: absolute;
    top: 0;
    padding: 0;
    margin: 0;
    width: 100%;
    height: 100%;
    max-height: 275px;
    border: none;
    z-index: 1;
    border-bottom: 2px solid;
}

body {
  min-width: 290px;
  font-family: 'Open Sans', Arial, sans-serif;
    line-height: 1.5;
}

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

main {
  position: relative;
}

#navbar {
  width: 160px; 
  height: 100%;
  position: fixed;
  z-index: 1; 
  top: 0; 
  left: 0;
  overflow-x: hidden;
  padding: 20px;
  background-color: #d4d4d4; 
  border: 1px solid black;
  border-left: none;
}

#navbar header {
    color: black;
    margin: 10px;
    text-align: center;
    font-size: 1.2em;
}

#navbar ul {
  list-style: none;
  padding: 0;
  overflow-y: auto;
  overflow-x: hidden;
}

#navbar li {
  border-top: 1px solid;
  list-style: none;
  position: relative;
  width: 100%;
  padding: 20px;
}

#navbar li a {
  text-decoration: none;
  color: black;
}```

Welcome to our community!

Set the overflow-y property:

#navbar {
  overflow-x:hidden;
  overflow-y:auto;
}

Heck yes! Thank you so much!!!

1 Like

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