# Scroll bar problem - technical documentation page

**URL:** <https://forum.freecodecamp.org/t/scroll-bar-problem-technical-documentation-page/440934>\
**Category:** I Built This\
**Created:** [January 16, 2021, 11:00am UTC](https://forum.freecodecamp.org/t/scroll-bar-problem-technical-documentation-page/440934 "2021-01-16T11:00:38Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![carlitoscampo95](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/carlitoscampo95/32/195042_2.png) [@carlitoscampo95](https://forum.freecodecamp.org/u/carlitoscampo95)\
**Post date:** [January 16, 2021, 11:00am UTC](https://forum.freecodecamp.org/t/scroll-bar-problem-technical-documentation-page/440934/1 "2021-01-16T11:00:38Z")

</div>

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)](https://codepen.io/carlos-campo-vecino/full/MWjqoMe)

HTML:

```auto
<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

```auto
#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

---

<div class="post-metadata">

**Author:** ![jenovs](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/jenovs/32/60963_2.png) [@jenovs](https://forum.freecodecamp.org/u/jenovs)\
**Post date:** [January 16, 2021, 11:13am UTC](https://forum.freecodecamp.org/t/scroll-bar-problem-technical-documentation-page/440934/2 "2021-01-16T11:13:13Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Roma](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/roma/32/112899_2.png) [@Roma](https://forum.freecodecamp.org/u/Roma)\
**Post date:** [January 16, 2021, 12:06pm UTC](https://forum.freecodecamp.org/t/scroll-bar-problem-technical-documentation-page/440934/3 "2021-01-16T12:06:32Z")

</div>

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.

 ![Pre-formatted-text](https://global.discourse-cdn.com/freecodecamp/original/3X/1/b/1b18854f1059217f29370444396145cc3a0cd8ae.gif)

See [this post](http://www.freecodecamp.com/forum/t/forum-code-formatting/25574) to find the backtick on your keyboard.  
**Note:** Backticks (`) are not single quotes (’).

---

<div class="post-metadata">

**Author:** ![carlitoscampo95](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/carlitoscampo95/32/195042_2.png) [@carlitoscampo95](https://forum.freecodecamp.org/u/carlitoscampo95)\
**Post date:** [January 16, 2021, 1:11pm UTC](https://forum.freecodecamp.org/t/scroll-bar-problem-technical-documentation-page/440934/4 "2021-01-16T13:11:51Z")

</div>

> [@jenovs](#):
>
> max-height: 100vh;

Perfect, thank you! It worked.

---

<div class="post-metadata">

**Author:** ![system](https://global.discourse-cdn.com/freecodecamp/original/3X/e/1/e1c433102e34b46dfaa3e15d13ab9a514b127078.svg) [@system](https://forum.freecodecamp.org/u/system)\
**Post date:** [July 18, 2021, 1:11am UTC](https://forum.freecodecamp.org/t/scroll-bar-problem-technical-documentation-page/440934/5 "2021-07-18T01:11:58Z")

</div>

Closed on July 18, 2021, 1:11am UTC

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