Today i learn about CSS Bootstrap 4 and i create my template with sidebar, but when many menu, i want sidebar show the scrollbar.
how to make scrollbar on my sidebar template, this is my HTML and my CSS code, please help me for this my issue. i will make sidebar with scroll and fixed
thanks very much
<head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta name="description" content=""> <meta name="author" content=""> <title>Simple Sidebar - Start Bootstrap Template</title> <!-- Bootstrap core CSS --> <link href="" rel="stylesheet"> <style> body { overflow-x: hidden;
}
#sidebar-wrapper { min-height: 100vh; margin-left: -15rem; -webkit-transition: margin .25s ease-out; -moz-transition: margin .25s ease-out; -o-transition: margin .25s ease-out; transition: margin .25s ease-out;
}
#sidebar-wrapper .sidebar-heading { padding: 0.875rem 1.25rem; font-size: 1.2rem;
}
#sidebar-wrapper .list-group { width: 15rem;
}
#page-content-wrapper { min-width: 100vw;
}
#wrapper.toggled #sidebar-wrapper { margin-left: 0;
}
@media (min-width: 768px) { #sidebar-wrapper { margin-left: 0; } #page-content-wrapper { min-width: 0; width: 100%; } #wrapper.toggled #sidebar-wrapper { margin-left: -15rem; }
} </style>
</head>
<body> <div> <!-- Sidebar --> <div> <div>Start Bootstrap </div> <div> <a href="#">Dashboard</a> <a href="#">Menu 1</a> <a href="#">Menu 2</a> <a href="#">Menu 3</a> <a href="#">Menu 4</a> <a href="#">Menu 5</a> <a href="#">Menu 6</a> <a href="#">Menu 7</a> <a href="#">Menu 8</a> <a href="#">Menu 9</a> <a href="#">Menu 10</a> <a href="#">Menu 11</a> <a href="#">Menu 12</a> <a href="#">Menu 13</a> <a href="#">Menu 14</a> </div> </div> <!-- /#sidebar-wrapper --> <!-- Page Content --> <div> <nav> <button>Toggle Menu</button> <button type="button" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span></span> </button> <div> <ul> <li> <a href="#">Home <span>(current)</span></a> </li> <li> <a href="#">Link</a> </li> <li> <a href="#" aria-haspopup="true" aria-expanded="false"> Dropdown </a> <div aria-labelledby="navbarDropdown"> <a href="#">Action</a> <a href="#">Another action</a> <div></div> <a href="#">Something else here</a> </div> </li> </ul> </div> </nav> <div> <h1>Simple Sidebar</h1> <p>The starting state of the menu will appear collapsed on smaller screens, and will appear non-collapsed on larger screens. When toggled using the button below, the menu will change.</p> <p>Make sure to keep all page content within the <code>#page-content-wrapper</code>. The top navbar is optional, and just for demonstration. Just create an element with the <code>#menu-toggle</code> ID which will toggle the menu when clicked.</p> </div> </div> <!-- /#page-content-wrapper --> </div> <!-- /#wrapper --> <!-- Bootstrap core JavaScript --> <script src=""></script> <script src=""></script> <!-- Menu Toggle Script --> <script> $("#menu-toggle").click(function(e) { e.preventDefault(); $("#wrapper").toggleClass("toggled"); }); </script>
</body>
</html>2 Answers
You can do it by simply adding Bootstrap classes...
<div> <div>Start Bootstrap </div> <div> <a href="#">Dashboard</a> <a href="#">Menu 1</a> <a href="#">Menu 2</a> <a href="#">Menu 3</a> <a href="#">Menu 4</a> <a href="#">Menu 5</a> <a href="#">Menu 6</a> <a href="#">Menu 7</a> <a href="#">Menu 8</a> <a href="#">Menu 9</a> <a href="#">Menu 10</a> <a href="#">Menu 11</a> <a href="#">Menu 12</a> <a href="#">Menu 13</a> <a href="#">Menu 14</a> </div> </div>Demo:
1I have modified the code of #sidebar-wrapper. It will add a scrollbar when overflow-y happens. I hope I understand your problem well.
#sidebar-wrapper { height: 100vh; /* Add height */ overflow-y: auto; /* Add overflow-y */ overflow-x: hidden; /* Add overflow-x */ /* min-height: 100vh; */ margin-left: -15rem; -webkit-transition: margin .25s ease-out; -moz-transition: margin .25s ease-out; -o-transition: margin .25s ease-out; transition: margin .25s ease-out; }<head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta name="description" content=""> <meta name="author" content=""> <title>Simple Sidebar - Start Bootstrap Template</title> <!-- Bootstrap core CSS --> <link href="" rel="stylesheet"> <style> body { overflow-x: hidden; } #sidebar-wrapper { height: 100vh; /* Add height */ overflow-y: auto; /* Add overflow-y */ overflow-x: hidden; /* Add overflow-x */ /* min-height: 100vh; */ margin-left: -15rem; -webkit-transition: margin .25s ease-out; -moz-transition: margin .25s ease-out; -o-transition: margin .25s ease-out; transition: margin .25s ease-out; } #sidebar-wrapper .sidebar-heading { padding: 0.875rem 1.25rem; font-size: 1.2rem; } #sidebar-wrapper .list-group { width: 15rem; } #page-content-wrapper { min-width: 100vw; } #wrapper.toggled #sidebar-wrapper { margin-left: 0; } @media (min-width: 768px) { #sidebar-wrapper { margin-left: 0; } #page-content-wrapper { min-width: 0; width: 100%; } #wrapper.toggled #sidebar-wrapper { margin-left: -15rem; } } </style>
</head>
<body> <div> <!-- Sidebar --> <div> <div>Start Bootstrap </div> <div> <a href="#">Dashboard</a> <a href="#">Menu 1</a> <a href="#">Menu 2</a> <a href="#">Menu 3</a> <a href="#">Menu 4</a> <a href="#">Menu 5</a> <a href="#">Menu 6</a> <a href="#">Menu 7</a> <a href="#">Menu 8</a> <a href="#">Menu 9</a> <a href="#">Menu 10</a> <a href="#">Menu 11</a> <a href="#">Menu 12</a> <a href="#">Menu 13</a> <a href="#">Menu 14</a> </div> </div> <!-- /#sidebar-wrapper --> <!-- Page Content --> <div> <nav> <button>Toggle Menu</button> <button type="button" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span></span> </button> <div> <ul> <li> <a href="#">Home <span>(current)</span></a> </li> <li> <a href="#">Link</a> </li> <li> <a href="#" aria-haspopup="true" aria-expanded="false"> Dropdown </a> <div aria-labelledby="navbarDropdown"> <a href="#">Action</a> <a href="#">Another action</a> <div></div> <a href="#">Something else here</a> </div> </li> </ul> </div> </nav> <div> <h1>Simple Sidebar</h1> <p>The starting state of the menu will appear collapsed on smaller screens, and will appear non-collapsed on larger screens. When toggled using the button below, the menu will change.</p> <p>Make sure to keep all page content within the <code>#page-content-wrapper</code>. The top navbar is optional, and just for demonstration. Just create an element with the <code>#menu-toggle</code> ID which will toggle the menu when clicked.</p> </div> </div> <!-- /#page-content-wrapper --> </div> <!-- /#wrapper --> <!-- Bootstrap core JavaScript --> <script src=""></script> <script src=""></script> <!-- Menu Toggle Script --> <script> $("#menu-toggle").click(function(e) { e.preventDefault(); $("#wrapper").toggleClass("toggled"); }); </script>
</body>
</html>
