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

Ways to remove the default classes added by ngbootstrap

The first div should be hidden when the toggle is activated

Guide on sending MySQL query results as JSON data using Ajax

RaphaelJS: Ensuring Consistent Size of SVG Path Shapes

Can I create interactive stacked shapes with CSS and/or JavaScript?

All browsers experiencing issues with autoplay audio function

Retrieving specific nodes from a JSON file and storing them in an array using jQuery

Uninterrupted jQuery AJAX calls

Is the component experiencing issues with its style functionality?

What are the best techniques for using jQuery to manipulate an HTML form that contains nested elements?

Ways to stop the thead from appearing on every page in a printout

Having trouble displaying a gray background/overlay in a Twitter Bootstrap modal design

Unable to retrieve valid inputs from text fields by utilizing jQuery selectors

Searching in jquery not functioning as intended

Getting the Correct Information from Upload Files in jQuery and PHP

Adapt the stylesheet for mobile devices using CSS

Utilizing Node.JS Nodemailer for sending emails with extensive HTML code

Tips for customizing the appearance of popup windows

Creating a Set of Buttons in HTML

"Enhance your web development skills by mastering jQuery alongside the