Conceal the horizontal scrollbar when the navigation menu is minimized

Question

Conceal the horizontal scrollbar when the navigation menu is minimized

Explaining this concept may be a bit challenging, so I have included a jsfiddle demo. The issue at hand involves a bootstrap nav menu that shifts to icons when not active and expands to include words when focused. When the menu is expanded, there are no scroll bars as intended. However, an unwanted horizontal scroll bar appears when the nav menu is collapsed. How can the horizontal scroll bar be hidden when the menu is in its collapsed state?

 $('#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;
}
...

<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>
        </div>
    </div>
</div>

jquery css twitter-bootstrap

Answer 1

Answer №1

Consider adding 'overflow: hidden' in your CSS for the html and body tags.

html, body {
   height: 100%;
   overflow: hidden;
}

Answer 2

Consider adding 'overflow: hidden' in your CSS for the html and body tags.

html, body {
   height: 100%;
   overflow: hidden;
}

Answer 3

Answer №2

The alignment issue might be due to the "left" css property. I've modified the code with some adjustments in your CSS file. Make sure to test it out using this updated 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;
        }

Answer 4

The alignment issue might be due to the "left" css property. I've modified the code with some adjustments in your CSS file. Make sure to test it out using this updated 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;
        }

Conceal the horizontal scrollbar when the navigation menu is minimized

Answer №1

Answer №2

Similar questions

Struggling with Responsiveness: Challenges with Detailed Information and Image Grid Design

Leveraging jQuery to extract the value from a concealed form field

Ways to ascertain if a view has completed rendering in JavaScript

When the button is clicked, a modal will pop up

Are you curious about the array of elements in React's carousel?

Requesting Access-Control-Request-Headers using jQuery Ajax POST method

detecting key presses on documents using javascript

What could be the reason for the navigation bar menu items not showing up in the sample application of the twitter.bootstrap.mvc4 package?

Picture is currently not showing up in the division

Tips on creating animations for a background with a value of 2 using CSS3

Using CSS with multiple background images and the "contain" property

Tips for Retrieving the Key Names of JSON Objects within a JSON Array

Discover how to prevent a link or text from appearing if a user has already browsed a particular webpage

Why is my jQuery $.ajax success function not providing any results?

Different Slide Library Fullpage.js

Guide to customizing action button color on MatSnackbar?

jquery makes it easy to create interactive hide and show effects

ways to instantly showcase the input's value within a DIV element

Implementing jQuery to trigger actions on every other click

Display the JSON data by pressing Enter key instead of clicking on the submit button