Twitter Bootstrap Question posted in

Hide horizontal scrollbar when nav is collapsed – Twitter bootstrap

This is a bit difficult to explain so I have a jsfiddle demo included, I have a bootstrap nav menu that collapses to icons when not focused, and then expands to icons and words when focused, when the menu is expanded there are no scroll bars however when the nav menu is collapsed I am getting this scrollbar that shouldn’t be there, how would I hide the horizontal scroll bar when the menu is collapsed?

 $('#sidebar').mouseover(function() {
     if($('.row-offcanvas').hasClass("active")){
        $('.row-offcanvas').toggleClass('active');
        $('.collapse').toggleClass('in').toggleClass('hidden-xs').toggleClass('visible-xs');
        $('#main').removeClass('expanded');
     }
}).mouseout(function() {
    $('.row-offcanvas').toggleClass('active');
    $('.collapse').toggleClass('in').toggleClass('hidden-xs').toggleClass('visible-xs');
    $('#main').addClass('expanded');
});
html, body {
   height: 100%;
}

.wrapper, .row {
   height: 100%;
   margin-left:0;
   margin-right:0;
}

.wrapper:before, .wrapper:after,
.column:before, .column:after {
    content: "";
    display: table;
}

.wrapper:after,
.column:after {
    clear: both;
}

#sidebar {
    background-color: #eee;
    padding-left: 0;
    float: left;
    min-height: 100%;
    padding-right: 0;
}

#sidebar .collapse.in {
    display: inline;
}

#sidebar > .nav>li>a {
    white-space: nowrap;
    overflow: hidden;
}

#main {
    padding: 15px;
    left: 0;
}

.expanded{
  margin-left: 25px;
  margin-right: 25px;
  width: 95%;
}

/*
 * off canvas sidebar
 * --------------------------------------------------
 */
@media screen and (max-width: 768px) {
    #sidebar {
        min-width: 44px;
    }
    
    #main {
        width: 1%;
        left: 0;
    }
    
    #sidebar .visible-xs {
       display:inline !important;
    }
    
    .row-offcanvas {
       position: relative;
       -webkit-transition: all 0.4s ease-in-out;
       -moz-transition: all 0.4s ease-in-out;
       transition: all 0.4s ease-in-out;
    }
    
    .row-offcanvas-left.active {
       left: 45%;
    }
    
    .row-offcanvas-left.active .sidebar-offcanvas {
       left: -45%;
       position: fixed;
       top: 0;
       width: 45%;
    }
} 
 
 
@media screen and (min-width: 768px) {
  .row-offcanvas {
    position: relative;
    -webkit-transition: all 0.25s ease-out;
    -moz-transition: all 0.25s ease-out;
    transition: all 0.25s ease-out;
  }
  
  .sidebar-offcanvas{
      position: fixed;
  }

  .row-offcanvas-left.active {
    left: 3%;
  }

  .row-offcanvas-left.active .sidebar-offcanvas {
    left: 0;
    position: fixed;
    top: 0;
    width: 3%;
    text-align: center;
    min-width:42px;
  }
  
  #main {
    left: 2%;
  }
   #main.expanded {
    left: 0;
    overflow: hidden;
  }
}


       #delete a {
          color: red;
        }
        #delete a:hover {
          color: white;
          background-color: red;
        }
        .divider{
            margin-top: 1rem;
            margin-bottom: 1rem;
            border: 0;
            border-top: 1px solid rgba(0, 0, 0, 0.1);
        }
        .nav > li > a:hover{
          color: white;
          background-color: #4285F4;
        }
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
    <div class="row row-offcanvas row-offcanvas-left">
        <!-- sidebar -->
        <div class="column col-sm-3 col-xs-1 sidebar-offcanvas" id="sidebar">
             <ul class="nav" id="menu">
                    <li><a href="#"><i class="fa fa-dashboard"></i> <span class="collapse in hidden-xs">Dashboard</span></a></li>
                    <li><a href="#"><i class="fa fa-exchange"></i> <span class="collapse in hidden-xs">Process</span></a></li>
                    <li><a href="#"><i class="fa fa-warning"></i> <span class="collapse in hidden-xs">Issues</span></a></li>
                    <li id="delete"><a href="#"><i class="fa fa-trash"></i> <span class="collapse in hidden-xs">Delete</span></a></li>
                    <li><a href="#"><i class="fa fa-paperclip"></i> <span class="collapse in hidden-xs">Reports</span></a></li>
                    <li><a href="#"><i class="fa fa-files-o"></i> <span class="collapse in hidden-xs">Logs</span></a></li>
                    <li>
                        <a href="#" data-target="#item1" data-toggle="collapse"><i class="fa fa-truck"></i> <span class="collapse in hidden-xs">SelectShip <span class="caret"></span></span></a>
                        <ul class="nav nav-stacked collapse left-submenu" id="item1">
                            <li><a href='#'><i class="fa fa-pencil-square"></i> Template</a></li>
                            <li><a href='#'><i class="fa fa-calendar"></i> Schedule</a></li>
                        </ul>
                    </li>
                    <li class="divider"></li>
                    <li><a href='https://login.salesforce.com'><i class="fa fa-cloud"></i> <span class="collapse in hidden-xs">Salesforce</span></a></li>
                </ul>
        </div>
        <!-- /sidebar -->

        <!-- main right col -->
        <div class="column col-sm-9 col-xs-11" id="main">
            <h1 class="page-header">Dashboard</h1>
            <p>
                How do I keep the horizontal bar from showing when the nav bar is collapsed? 
            </p>
            <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc molestie feugiat lectus eu scelerisque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque ac ex non turpis faucibus sagittis eget et sem. Aenean neque sapien, rutrum non egestas a, efficitur sed nulla. Mauris lacinia venenatis nisi lobortis porttitor. Suspendisse placerat purus eget nisi accumsan molestie. Sed sed ultrices felis, vitae tempus est. Aliquam tempus, nibh vitae varius commodo, felis ante fringilla odio, in malesuada augue quam sed nulla. Proin eget rhoncus lorem, at egestas mauris.
            </p>
            <p>
            Aenean venenatis ultrices egestas. Nam ut blandit augue. Nulla luctus ultricies massa, et tempus justo pharetra ac. Aliquam suscipit accumsan lectus nec dapibus. Nullam a nulla at velit faucibus vehicula. Sed et est purus. Morbi eget arcu sed dui consequat efficitur. Phasellus id erat mauris.
            </p>
            <p>
            Praesent non velit lacus. Praesent tincidunt, felis ut pretium dignissim, orci augue suscipit odio, sodales ultrices velit metus luctus dui. Phasellus tincidunt nulla sit amet mauris imperdiet posuere. Praesent at risus neque. Donec eleifend molestie tellus, a tincidunt leo rutrum ac. Nullam eget dictum neque. Aenean dignissim eleifend elementum. Pellentesque mattis rutrum dolor id sagittis. Morbi blandit rhoncus vehicula.
            </p>
             <p>
            Praesent non velit lacus. Praesent tincidunt, felis ut pretium dignissim, orci augue suscipit odio, sodales ultrices velit metus luctus dui. Phasellus tincidunt nulla sit amet mauris imperdiet posuere. Praesent at risus neque. Donec eleifend molestie tellus, a tincidunt leo rutrum ac. Nullam eget dictum neque. Aenean dignissim eleifend elementum. Pellentesque mattis rutrum dolor id sagittis. Morbi blandit rhoncus vehicula.
            </p>
        </div>
        <!-- /main -->
    </div>
</div>
Tags:

2

Answers


  1. 0

    Try using ‘overflow: hidden’ on your html, body css tag. 

    html, body {
   height: 100%;
   overflow: hidden;
}
    Login or Signup to reply.
  2. 0

    The “left” css property is throwing it off. I used u r css and made the necessary changes. Try to run it with this css 

    html, body {
   height: 100%;
}

.wrapper, .row {
   height: 100%;
   margin-left:0;
   margin-right:0;
}

.wrapper:before, .wrapper:after,
.column:before, .column:after {
    content: "";
    display: table;
}

.wrapper:after,
.column:after {
    clear: both;
}

#sidebar {
    background-color: #eee;
    padding-left: 0;
    float: left;
    min-height: 100%;
    padding-right: 0;
}

#sidebar .collapse.in {
    display: inline;
}

#sidebar > .nav>li>a {
    white-space: nowrap;
    overflow: hidden;
}

#main {
    padding: 15px;
    left: 0;
}

.expanded{
  margin-left: 25px;
  margin-right: 25px;
  width: 95%;
}

/*
 * off canvas sidebar
 * --------------------------------------------------
 */
@media screen and (max-width: 768px) {
    #sidebar {
        min-width: 44px;
    }
    
    #main {
        width: 1%;
        left: 0;
    }
    
    #sidebar .visible-xs {
       display:inline !important;
    }
    
    .row-offcanvas {
       position: relative;
       -webkit-transition: all 0.4s ease-in-out;
       -moz-transition: all 0.4s ease-in-out;
       transition: all 0.4s ease-in-out;
    }
    
    .row-offcanvas-left.active {
       left: 45%;
    }
    
    .row-offcanvas-left.active .sidebar-offcanvas {
       left: -45%;
       position: fixed;
       top: 0;
       width: 45%;
    }
} 
 
 
@media screen and (min-width: 768px) {
  .row-offcanvas {
    position: relative;
    -webkit-transition: all 0.25s ease-out;
    -moz-transition: all 0.25s ease-out;
    transition: all 0.25s ease-out;
  }
  
  .sidebar-offcanvas{
      position: fixed;
  }

  .row-offcanvas-left.active .sidebar-offcanvas {
    left: 0;
    position: fixed;
    top: 0;
    width: 3%;
    text-align: center;
    min-width:42px;
  }
  
  #main {
    left: 25%;
  }
   #main.expanded {
    left: 3%;
    overflow: hidden;
  }
}


       #delete a {
          color: red;
        }
        #delete a:hover {
          color: white;
          background-color: red;
        }
        .divider{
            margin-top: 1rem;
            margin-bottom: 1rem;
            border: 0;
            border-top: 1px solid rgba(0, 0, 0, 0.1);
        }
        .nav > li > a:hover{
          color: white;
          background-color: #4285F4;
        }
html, body {
   height: 100%;
}

.wrapper, .row {
   height: 100%;
   margin-left:0;
   margin-right:0;
}

.wrapper:before, .wrapper:after,
.column:before, .column:after {
    content: "";
    display: table;
}

.wrapper:after,
.column:after {
    clear: both;
}

#sidebar {
    background-color: #eee;
    padding-left: 0;
    float: left;
    min-height: 100%;
    padding-right: 0;
}

#sidebar .collapse.in {
    display: inline;
}

#sidebar > .nav>li>a {
    white-space: nowrap;
    overflow: hidden;
}

#main {
    padding: 15px;
    left: 0;
}

.expanded{
  margin-left: 25px;
  margin-right: 25px;
  width: 95%;
}

/*
 * off canvas sidebar
 * --------------------------------------------------
 */
@media screen and (max-width: 768px) {
    #sidebar {
        min-width: 44px;
    }
    
    #main {
        width: 1%;
        left: 0;
    }
    
    #sidebar .visible-xs {
       display:inline !important;
    }
    
    .row-offcanvas {
       position: relative;
       -webkit-transition: all 0.4s ease-in-out;
       -moz-transition: all 0.4s ease-in-out;
       transition: all 0.4s ease-in-out;
    }
    
    .row-offcanvas-left.active {
       left: 45%;
    }
    
    .row-offcanvas-left.active .sidebar-offcanvas {
       left: -45%;
       position: fixed;
       top: 0;
       width: 45%;
    }
} 
 
 
@media screen and (min-width: 768px) {
  .row-offcanvas {
    position: relative;
    -webkit-transition: all 0.25s ease-out;
    -moz-transition: all 0.25s ease-out;
    transition: all 0.25s ease-out;
  }
  
  .sidebar-offcanvas{
      position: fixed;
  }

  .row-offcanvas-left.active .sidebar-offcanvas {
    left: 0;
    position: fixed;
    top: 0;
    width: 3%;
    text-align: center;
    min-width:42px;
  }
  
  #main {
    left: 25%;
  }
   #main.expanded {
    left: 3%;
    overflow: hidden;
  }
}


       #delete a {
          color: red;
        }
        #delete a:hover {
          color: white;
          background-color: red;
        }
        .divider{
            margin-top: 1rem;
            margin-bottom: 1rem;
            border: 0;
            border-top: 1px solid rgba(0, 0, 0, 0.1);
        }
        .nav > li > a:hover{
          color: white;
          background-color: #4285F4;
        }
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search