CODEWITHSUNDEEP
htmljquerycss
kavya
kavya

Reputation: 325

Navigation bar moves along on scroll

I have a navigation bar and set of ul li elemts added.when the li elemtens are more the scrollbar is added.

But the navigation header moves along with scroll.How to make navigation bar be fixed at same position and make only li elements to move on scroll 

.file-info
{

height: 80vh;
background-color: white;
overflow:scroll;
 width:100%; 
position: relative;
box-shadow: 0 1px 6px rgba(0, 0, 0, 0.16), 0 1px 4px rgba(0, 0, 0, 0.26);
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="col-sm-6 file-info">
            <ul class="nav nav-tabs ">
              <li class="nav-item">
                  <a href="#view" class="nav-link active " data-toggle="tab">Report View</a>
              </li>
              <li class="nav-item">
                  <a href="#datamodel-view" class="nav-link" data-toggle="tab">Datamodel View</a>
              </li>
          </ul>
          <div class="tab-content">
              <div class="tab-pane fade show active" id="view">
                <ul class="end-info" id = 'menu'>
                  <li>Sales</li>
                  <li>Sales</li>
                  <li>Sales</li>
                  <li>Sales</li>
                  <li>Sales</li>
                  <li>Sales</li>
                  <li>Sales</li>
                  <li>Sales</li>
                  <li>Sales</li>
                  <li>Sales</li>
                  <li>Sales</li>
                  <li>Sales</li>
                  <li>Sales</li>
                  <li>Sales</li><li>Sales</li>
                  <li>Sales</li>
                </ul>
              </div>
             </div>
     </div>

Upvotes: 0

Views: 89

Answers (3)

gavgrif
gavgrif

Reputation: 15489

You need to put the overflow on either the tab-content or the .tab-pane not on the parent div -

.file-info {
 background-color: white;
 width:100%; 
 height: 100%;
 position: relative;
 box-shadow: 0 1px 6px rgba(0, 0, 0, 0.16), 0 1px 4px rgba(0, 0, 0, 0.26);
 overflow: hidden
}


.tab-pane {
 height: 80vh;
 overflow-y:auto;
 overflow-x: hidden
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

    <div class="col-sm-6 file-info">
            <ul class="nav nav-tabs ">
              <li class="nav-item">
                  <a href="#view" class="nav-link active " data-toggle="tab">Report View</a>
              </li>
              <li class="nav-item">
                  <a href="#datamodel-view" class="nav-link" data-toggle="tab">Datamodel View</a>
              </li>
          </ul>
          <div class="tab-content">
              <div class="tab-pane fade show active" id="view">
                <ul class="end-info" id = 'menu'>
                  <li>Sales</li>
                  <li>Sales</li>
                  <li>Sales</li>
                  <li>Sales</li>
                  <li>Sales</li>
                  <li>Sales</li>
                  <li>Sales</li>
                  <li>Sales</li>
                  <li>Sales</li>
                  <li>Sales</li>
                  <li>Sales</li>
                  <li>Sales</li>
                  <li>Sales</li>
                  <li>Sales</li><li>Sales</li>
                  <li>Sales</li>
                </ul>
              </div>
             </div>
     </div>

Upvotes: 0

CodeBug
CodeBug

Reputation: 1667

.file-info
{

height: 80vh;
background-color: white;
overflow:scroll;
 width:100%; 
position: relative;
box-shadow: 0 1px 6px rgba(0, 0, 0, 0.16), 0 1px 4px rgba(0, 0, 0, 0.26);
}
.nav-tabs{
  position:fixed;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="col-sm-6 file-info">
            <ul class="nav nav-tabs ">
              <li class="nav-item">
                  <a href="#view" class="nav-link active " data-toggle="tab">Report View</a>
              </li>
              <li class="nav-item">
                  <a href="#datamodel-view" class="nav-link" data-toggle="tab">Datamodel View</a>
              </li>
          </ul>
          <div class="tab-content">
              <div class="tab-pane fade show active" id="view">
                <ul class="end-info" id = 'menu'>
                  <li>Sales</li>
                  <li>Sales</li>
                  <li>Sales</li>
                  <li>Sales</li>
                  <li>Sales</li>
                  <li>Sales</li>
                  <li>Sales</li>
                  <li>Sales</li>
                  <li>Sales</li>
                  <li>Sales</li>
                  <li>Sales</li>
                  <li>Sales</li>
                  <li>Sales</li>
                  <li>Sales</li><li>Sales</li>
                  <li>Sales</li>
                </ul>
              </div>
             </div>
     </div>

use

.nav-tabs{
   position:fixed;
 }

this will keep the nav-tabs class to a fixed position and where remaining all are scrollable. read here more about CSS positions

Upvotes: 0

cssyphus
cssyphus

Reputation: 40038

Add .nav{position:fixed;} to your css:

.file-info{
  height: 80vh;
  background-color: white;
  overflow:scroll;
  width:100%; 
  position: relative;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.16), 0 1px 4px rgba(0, 0, 0, 0.26);
}
.nav{position:fixed;}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="col-sm-6 file-info">
            <ul class="nav nav-tabs ">
              <li class="nav-item">
                  <a href="#view" class="nav-link active " data-toggle="tab">Report View</a>
              </li>
              <li class="nav-item">
                  <a href="#datamodel-view" class="nav-link" data-toggle="tab">Datamodel View</a>
              </li>
          </ul>
          <div class="tab-content">
              <div class="tab-pane fade show active" id="view">
                <ul class="end-info" id = 'menu'>
                  <li>Sales</li>
                  <li>Sales</li>
                  <li>Sales</li>
                  <li>Sales</li>
                  <li>Sales</li>
                  <li>Sales</li>
                  <li>Sales</li>
                  <li>Sales</li>
                  <li>Sales</li>
                  <li>Sales</li>
                  <li>Sales</li>
                  <li>Sales</li>
                  <li>Sales</li>
                  <li>Sales</li><li>Sales</li>
                  <li>Sales</li>
                </ul>
              </div>
             </div>
     </div>

Upvotes: 1

Related Questions