title: prevent navbar content from scrolling
body: <p>I have a React app with a navbar that scrolls the content inside it.I want to prevent it from scrolling the content inside itself. </p>
  
  <p>I have tried making the links and the logo shorter, tried setting <code>min-height: 100vh;</code> and <code>height: 50%;</code> for <code>.toolbar</code> and <code>.toolbar__navigation</code> classes but it still did not prevent the navbar from scrolling the content inside itself.</p>
  
  <p>Here is my App.js:</p>
  
  <pre><code>  render() {
      let backdrop;
      if (this.state.sideDrawerOpen) {
        backdrop = &lt;Backdrop click={this.backdropClickHandler} /&gt;;
      }
      return (
        &lt;div className="main"&gt;
          &lt;Navbar drawerClickHandler={this.drawerToggleClickHandler} /&gt;
          &lt;SideDrawer show={this.state.sideDrawerOpen} /&gt;
          &lt;div className="App"&gt;
            {backdrop}
            &lt;main style={{ marginTop: "64px" }}&gt;
              &lt;MuiThemeProvider&gt;
                &lt;Router&gt;
                  &lt;Route path="/" exact component={Home} /&gt;
                  &lt;Route path="/coaches" component={Coaches} /&gt;
                  &lt;Route path="/consult" component={ConsultationForm} /&gt;
                  &lt;Route path="/about" component={About} /&gt;
                &lt;/Router&gt;
              &lt;/MuiThemeProvider&gt;
            &lt;/main&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      );
    }
  </code></pre>
  
  <p>Here is my Navbar.js:</p>
  
  <pre><code>  render() {
      return (
        &lt;header
          className={classnames("toolbar", {
            "toolbar--hidden": !this.state.visible
          })}
        &gt;
          &lt;nav className="toolbar__navigation"&gt;
            &lt;div className="toolbar__toggle--button"&gt;&lt;/div&gt;
            &lt;div className="toolbar__logo"&gt;
              &lt;a href="/"&gt;
                &lt;img src={logo} className="toolbar__logo--pic" /&gt;
              &lt;/a&gt;
            &lt;/div&gt;
            &lt;div className="spacer"&gt;&lt;/div&gt;
            &lt;div className="toolbar__navigation--items"&gt;
              &lt;ul&gt;
                &lt;li&gt;
                  &lt;a href="/consult" className="toolbar__navigation--link"&gt;
                    Services
                  &lt;/a&gt;
                &lt;/li&gt;
                &lt;li&gt;
                  &lt;a href="/contact" className="toolbar__navigation--link"&gt;
                    Contact Us
                  &lt;/a&gt;
                &lt;/li&gt;
                &lt;li&gt;
                  &lt;a href="/about" className="toolbar__navigation--link"&gt;
                    About Us
                  &lt;/a&gt;
                &lt;/li&gt;
              &lt;/ul&gt;
            &lt;/div&gt;
            &lt;div /&gt;
          &lt;/nav&gt;
        &lt;/header&gt;
      );
    }
  </code></pre>
  
  <p>Here is my navbar.scss:</p>
  
  <pre><code>
  .toolbar {
      position: fixed;
      top: 0;
  
      left: 0;
      width: 100%;
      overflow: auto;
      background-color: $color-black;
      opacity: 1;
      height: 56px;
      transition: top 0.3s;
      z-index:99;
  }
  
  .toolbar__navigation{
      display: flex;
      height: 56px;
  
      align-items: center;
      padding: 0 1rem;
  
      &amp;--link{
          color: white;
          &amp;:link,
          &amp;:visited {
              color: $color-grey-light-1;
              text-decoration: none;
              text-transform: uppercase;
              display: inline-block;
          }
  
          &amp;:hover,
          &amp;:active {
              color: $color-primary;
              box-shadow: 0 1rem 2rem rgba($color-black, .4);
              transform: rotate(5deg) scale(1.3);
          }
      }
  }
  
  .toolbar--hidden{
      top: -50px;
      display: none;
  }
  .toolbar__logo--pic {
      width:85px;
      height: 75px;
  }
  
  .toolbar__logo a{
      color: white;
      text-decoration: none;
      font-size: 2rem;
  }
  
  .toolbar__logo{
      margin-left: 1rem;
  }
  
  .toolbar__navigation--items a{
      color: white;
      text-decoration: none;
  
  }
  .spacer{
      flex: 1;
  }
  .toolbar__navigation--items ul{
      list-style: none;
      margin: 0;
      padding: 0;
      display: flex;
  }
  .toolbar__navigation--items li{
      padding: 0 0.5rem;
  }
  .toolbar__navigation--items a:hover{
      color: red;
      text-decoration: none;   
  }
  
  .toolbar__navigation--items a:active{
      color: red;
      text-decoration: none;
  
  }
  @media (max-width: 768px){
      .toolbar__navigation--items {
          display: none;
      }
  }
  
  @media (min-width: 769px){
      .toolbar__toggle--button{
          display: none;
      }
      .toolbar__logo{
          margin-left: 0;
      }
  }
  </code></pre>
  
  <p>I want the content inside the navbar to not be scrollable, any help would be appreciated...</p>