CODEWITHSUNDEEP
htmljquerycsstwitter-bootstrap
bep42
bep42

Reputation: 351

Scroll the content inside the collapse menu Bootstrap

I'm trying to find an easy solution to propose a scroll of the content from the collapse menu when it's collapsed on mobile. I mean, i would like to propose first a scroll of the collapse menu than the body, when the menu is open.

Is there any tip in CSS for this thing? Or only JS script?

Here is my link (please check in mobile view)

My HTML code :

 <a role="button" data-toggle="collapse" data-target="#NavbarCollapse" class="nav-link navbar-toggler hidden-md-up"><span class="icon-menu"></span></a>

<div class="row">
                      <div class="collapse navbar-toggleable-sm hidden-md-up col-xs-12" id="NavbarCollapse">
                        <ul class="nav navbar-nav text-center">
                          <li class="nav-item active col-xs-12"><a href="#">Tableau de bord</a></li>
                          <li class="nav-item col-xs-12"><a href="#">Mon agenda</a></li>
                          <li class="nav-item col-xs-12"><a href="#">Messagerie<span class="label label-primary label-pill">17</span></a></li>
                          <li class="nav-item col-xs-12"><a href="#">Mes patients</a></li>
                          <li class="nav-item col-xs-12"><a href="#">Activité</a></li>
                          <li class="nav-item col-xs-12"><a href="#">Mon cabinet virtuel</a></li>
                          <li class="nav-item col-xs-12"><a href="#">Informations administratives</a></li>
                          <li class="nav-item col-xs-12"><a href="#">Informations bancaires</a></li>
                          <li class="nav-item col-xs-12"><a href="#">Informations profil</a></li>
                          <li class="nav-item col-xs-12"><a href="#">Aide</a></li>
                          <li class="nav-item col-xs-12"><a href="#">Déconnexion</a></li>
                        </ul>
                      </div>
                    </div>

Hope my question is clear for you guys. Thanks a lot.

Upvotes: 2

Views: 4971

Answers (2)

iCollect.it Ltd
iCollect.it Ltd

Reputation: 93561

You just need a fixed height on the UL and enable overflow:

ul.nav.navbar-nav
{
    height: 100px;
    overflow-y: auto;
}

If you just want full height:

ul.nav.navbar-nav
{
    height: 60vh;  // The rest of your display is 30-40% on smaller heights
    overflow-y: auto;
}

If you want it to adjust to the size of the screen dynamically, you will need to set the height on window resize instead.

Upvotes: 1

Bwaxxlo
Bwaxxlo

Reputation: 1880

Add a scrolling ability to the sidebar nav.

#NavbarCollapse{
   max-height: 50vh;
   overflow-y: auto;
}

Upvotes: 7

Related Questions