Scroll bar problem - technical documentation page

[carlitoscampo95]

Hey guys,

I’m having troubles with my vertical scroll bar.

For some reason the bar doesn’t show up, so I can’t scroll to my nav-bar´s last element. Could you help me out please?

Here’s my code:

FCC: Technical Documentation Page (codepen.io)

HTML:

<nav id="navbar">
  <header id="navbar_header"><strong>AD TESTER’S ARTIFICIAL INTELLIGENCE</strong></header>
  <nav id="nav_menu">
    <hr>
    <p><a href="#INTRODUCTION" class="nav-link">Introduction</a></p><hr>
    <p><a href="#Limitations" class="nav-link">Limitations</a></p><hr>
    <p><a href="#Results_over_time" class="nav-link">Results over time</a></p><hr>
    <p><a href="#Advantages" class="nav-link">Advantages</a></p><hr>
    <p><a href="#Neural_Networks" class="nav-link">Neural Networks</a></p><hr>
    <p><a href="#Ezoic´s_Ad_Tester" class="nav-link">Ezoic´s Ad Tester</a></p><hr>
    <p><a href="#Ezoic´s_Uses" class="nav-link">Ezoic´s Uses</a></p><hr>
  </nav>
</nav>

CSS

#navbar {
  left: 0;
  top: 0;
  position: fixed;
  max-width: 360px;
  background-color: ;
}

#navbar_header {
  text-align: center;
  padding: 30px;
  font-size: 30px;
}

#nav_menu {
  text-align: left;
  padding: 20px;
  font-size: 25px;
  font-weight: 600;
  background-color: ;
  overflow-y: scroll;
}

#nav_menu a {
  text-decoration: none;
  color: black;
  padding: 10px 0 10px 0;
  width: 100%;
  margin-left: 10px;
}

hr {
  background: #FC466B;  /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #3F5EFB, #FC466B);  /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #3F5EFB, #FC466B); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

  height: 3px;
  border-color: black;
}

Carlos

[jenovs]

Add max-height: 100vh; and overflow-y: auto; to #navbar

[Roma]

I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (’).

[carlitoscampo95]

@jenovs

max-height: 100vh;

Perfect, thank you! It worked.