Topic: Scrolling main content
                  
                  mark goldin
                  free
                  asked 6 years ago
                
I just realized that admin template scrolls including top navigation. So, I added fixed-top to make it stay. But still, vertical scroll bar takes the whole page height. How can I make the content be only the scrollable area?
Thanks
                      
                      Bartosz Termena
                      staff
                        answered 6 years ago
                    
Dear @mark goldin
I can't reproduce your problem, when i add fixed-top to <mdb-navbar>, everything looks fine (sidenav and navbar are fixed, only content is scrollable). Could you show me your code? Below is my example:
navigation.component.html from admin-template:
<header>
  <div class="sidebar-fixed position-fixed">
    <a class="logo-wrapper waves-effect">
      <img
        src="../../../../assets/img/angular-mdb.png"
        class="img-fluid"
        alt=""
      />
    </a>
    <div class="list-group list-group-flush">
      <a
        routerLink="dashboards/v1"
        routerLinkActive="active"
        class="list-group-item list-group-item-action waves-effect"
      >
        <mdb-icon fas icon="chart-pie" class="mr-3"></mdb-icon>Dashboard
      </a>
      <a
        routerLink="profiles/profile1"
        routerLinkActive="active"
        class="list-group-item list-group-item-action waves-effect"
      >
        <mdb-icon fas icon="user" class="mr-3"></mdb-icon>Profile</a
      >
      <a
        routerLink="tables/table1"
        routerLinkActive="active"
        class="list-group-item list-group-item-action waves-effect"
      >
        <mdb-icon fas icon="table" class="mr-3"></mdb-icon>Tables</a
      >
      <a
        routerLink="maps/map1"
        routerLinkActive="active"
        class="list-group-item list-group-item-action waves-effect"
      >
        <mdb-icon far icon="map" class="mr-3"></mdb-icon>Maps</a
      >
      <a
        routerLink="nonExistingPath"
        routerLinkActive="active"
        class="list-group-item list-group-item-action waves-effect"
      >
        <mdb-icon fas icon="exclamation" class="mr-3"></mdb-icon>404</a
      >
    </div>
  </div>
  <mdb-navbar
    [containerInside]="false"
    SideClass="navbar navbar-expand-lg navbar-light white fixed-top"
  >
    <logo class="ml-3">
      <a
        class="navbar-brand"
        href="https://mdbootstrap.com/angular/angular-bootstrap-getting-started/"
      >
        <strong class="blue-text">MDB</strong>
      </a>
    </logo>
    <links>
      <ul class="navbar-nav mr-auto">
        <li class="nav-item active">
          <a class="nav-link" mdbWavesEffect
            >Home
            <span class="sr-only">(current)</span>
          </a>
        </li>
        <li class="nav-item">
          <a
            class="nav-link"
            href="https://mdbootstrap.com/angular/angular-bootstrap-getting-started/"
            target="_blank"
            mdbWavesEffect
            >About MDB</a
          >
        </li>
        <li class="nav-item">
          <a
            class="nav-link"
            href="https://mdbootstrap.com/angular/getting-started/"
            target="_blank"
            mdbWavesEffect
            >Free download</a
          >
        </li>
        <li class="nav-item">
          <a
            class="nav-link"
            href="https://mdbootstrap.com/angular/angular-tutorial/"
            target="_blank"
            mdbWavesEffect
            >Free tutorials</a
          >
        </li>
      </ul>
      <ul class="navbar-nav nav-flex-icons">
        <li class="nav-item">
          <a
            href="https://www.facebook.com/mdbootstrap"
            class="nav-link"
            target="_blank"
            mdbWavesEffect
          >
            <mdb-icon fab icon="facebook-f"></mdb-icon>
          </a>
        </li>
        <li class="nav-item">
          <a
            href="https://twitter.com/MDBootstrap"
            class="nav-link"
            target="_blank"
            mdbWavesEffect
          >
            <mdb-icon fab icon="twitter"></mdb-icon>
          </a>
        </li>
        <li class="nav-item">
          <a
            href="https://github.com/mdbootstrap/bootstrap-material-design"
            class="nav-link border border-light"
            target="_blank"
            mdbWavesEffect
          >
            <mdb-icon fab icon="github" class="mr-2"></mdb-icon>MDB GitHub
          </a>
        </li>
        <li class="nav-item">
          <a
            href="https://mdbootstrap.com/products/angular-ui-kit/"
            class="ml-1 nav-link border border-light rounded"
            mdbWavesEffect
          >
            <mdb-icon far icon="gem" class=" left"></mdb-icon> Go Pro</a
          >
        </li>
      </ul>
    </links>
  </mdb-navbar>
</header>
Best Regards, Bartosz.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- ForumUser: Free
 - Premium support: No
 - Technology: MDB Angular
 - MDB Version: 8.4.0
 - Device: PC
 - Browser: All
 - OS: All
 - Provided sample code: No
 - Provided link: No
 
Bartosz Termena staff commented 6 years ago
Hi! Thank you for reporting the problem. We'll take a closer look at that.
Best Regards, Bartosz.