Twitter Bootstrap Question posted in

Can't scroll collapsable fixed nav list – Twitter bootstrap

I’ve created a fixed navbar (inspired by Twitter Bootstrap). Because my navh as quite alot of links within it, I’ve decided to make the mobile level of the nav list fixed height and scroll the overflow-y. All seemed fine when testing it in Google Chrome using the responsive tools. But, when I checked it live on an actual mobile device (iPhone 4), when I try to scroll the nav, it scrolls the page instead.

At first I thought adding a z-index to the nav would fix it, but it didn’t.

What CSS do I need to add to ensure that when a user scrolls the nav element it scrolls it instead of the page?

Here is a JS Fiddle:
https://jsfiddle.net/n1g72opt/

HTML:

<header>
  <div class="nav-show-btn">Toggle</div>
  <nav class="show">
    <ul><li><a href="javascript:;" data-route="">Users</a>
    <ul>

      <li><a href="javascript:;">Link 1</a></li>
      <li><a href="javascript:;">Link 2</a></li>   
      <li><a href="javascript:;">Link 3</a></li>   
      <li><a href="javascript:;">Link 4</a></li>   
      <li><a href="javascript:;">Link 5</a></li>   
      <li><a href="javascript:;">Link 6</a></li>   
      <li><a href="javascript:;">Link 7</a></li>   
      <li><a href="javascript:;">Link 1</a></li>
      <li><a href="javascript:;">Link 2</a></li>   
      <li><a href="javascript:;">Link 3</a></li>   
      <li><a href="javascript:;">Link 4</a></li>   
      <li><a href="javascript:;">Link 5</a></li>   
      <li><a href="javascript:;">Link 6</a></li>   
      <li><a href="javascript:;">Link 7</a></li>  
      <li><a href="javascript:;">Link 6</a></li>   
      <li><a href="javascript:;">Link 7</a></li>   
      <li><a href="javascript:;">Link 1</a></li>
      <li><a href="javascript:;">Link 2</a></li>   
      <li><a href="javascript:;">Link 3</a></li>   
      <li><a href="javascript:;">Link 4</a></li>   
      <li><a href="javascript:;">Link 5</a></li>   
      <li><a href="javascript:;">Link 6</a></li>   
      <li><a href="javascript:;">Link 7</a></li>  
      <li><a href="javascript:;">Link 6</a></li>   
      <li><a href="javascript:;">Link 7</a></li>   
      <li><a href="javascript:;">Link 1</a></li>
      <li><a href="javascript:;">Link 2</a></li>   
      <li><a href="javascript:;">Link 3</a></li>   
      <li><a href="javascript:;">Link 4</a></li>   
      <li><a href="javascript:;">Link 5</a></li>   
      <li><a href="javascript:;">Link 6</a></li>   
      <li><a href="javascript:;">Link 7</a></li>  
      <li><a href="javascript:;">Link 6</a></li>   
      <li><a href="javascript:;">Link 7</a></li>   
      <li><a href="javascript:;">Link 1</a></li>
      <li><a href="javascript:;">Link 2</a></li>   
      <li><a href="javascript:;">Link 3</a></li>   
      <li><a href="javascript:;">Link 4</a></li>   
      <li><a href="javascript:;">Link 5</a></li>   
      <li><a href="javascript:;">Link 6</a></li>   
      <li><a href="javascript:;">Link 7</a></li>  
      <li><a href="javascript:;">Link 6</a></li>   
      <li><a href="javascript:;">Link 7</a></li>   
      <li><a href="javascript:;">Link 1</a></li>
      <li><a href="javascript:;">Link 2</a></li>   
      <li><a href="javascript:;">Link 3</a></li>   
      <li><a href="javascript:;">Link 4</a></li>   
      <li><a href="javascript:;">Link 5</a></li>   
      <li><a href="javascript:;">Link 6</a></li>   
      <li><a href="javascript:;">Link 7</a></li>  
      <li><a href="javascript:;">Link 6</a></li>   
      <li><a href="javascript:;">Link 7</a></li>   
      <li><a href="javascript:;">Link 1</a></li>
      <li><a href="javascript:;">Link 2</a></li>   
      <li><a href="javascript:;">Link 3</a></li>   
      <li><a href="javascript:;">Link 4</a></li>   
      <li><a href="javascript:;">Link 5</a></li>   
      <li><a href="javascript:;">Link 6</a></li>   
      <li><a href="javascript:;">Link 7</a></li>  
      <li><a href="javascript:;">Link 6</a></li>   
      <li><a href="javascript:;">Link 7</a></li>   
      <li><a href="javascript:;">Link 1</a></li>
      <li><a href="javascript:;">Link 2</a></li>   
      <li><a href="javascript:;">Link 3</a></li>   
      <li><a href="javascript:;">Link 4</a></li>   
      <li><a href="javascript:;">Link 5</a></li>   
      <li><a href="javascript:;">Link 6</a></li>   
      <li><a href="javascript:;">Link 7</a></li>  


    </ul>
</li>
</ul>
</nav>
</header>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam condimentum et orci in sagittis. Maecenas laoreet libero id enim congue ornare. Integer ac venenatis leo, et placerat libero. Nunc eu porta justo. Praesent imperdiet turpis ut congue suscipit. Fusce molestie vulputate est. Nam at facilisis nunc. Vivamus tempus eu lacus et

CSS:

header {
    background: #3b3f44;
    color: #f5f5f5;
    position: fixed;
    width: 100%;
    z-index: 9999;
    top: 0;
}
.nav-show-btn {
    display: inline-block;
    float: right;
    font-size: 12px;
    padding: 10px;
    cursor: pointer;
}

header nav.show {
    display: block !important;
    max-height: calc(100vh - 80px);
    overflow-y: scroll;
    width: 100%;
    position:relative;
    z-index: 9999;
}
Tags:

3

Answers


  1. 0

    try set ul element to

    overflow: scroll
    maybe can solf this!

    Login or Signup to reply.
  2. 0

    You need use -webkit-overflow-scrolling:touch; and in my case i need add height also.

    Set it only when you loading page on mobile phone, use media query like;

    @media (min-width:320px)  {
/* smartphones, iPhone, portrait 480x320 phones */ 
    header nav.show {
            display: block !important;
            max-height: calc(100vh - 80px);
            height: 200px;
            overflow-y: scroll;
            width: 100%;
            -webkit-overflow-scrolling:touch; // mobile safari
        }
}
    Login or Signup to reply.
  3. 0

    You can lock body element on clicking Toggle button in-order to avoid body content scrolling until the navBar panel is open.

    $('.nav-show-btn').on('click', function() {
    $('body').toggleClass('menuOpen');      // Lock Body layer
    $('header > nav').toggleClass('show') // open navbar
});

    jsFiddle: https://jsfiddle.net/ShirishDhotre/zt8LhoL8/1/

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search