bep42 February 2016

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>
           

Answers


Gone Coding February 2016

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.


Bwaxxlo February 2016

Add a scrolling ability to the sidebar nav.

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

Post Status

Asked in February 2016
Viewed 2,161 times
Voted 4
Answered 2 times

Search




Leave an answer