I'm trying to set up a sidebar in Bootstrap that overlaps with a column. The goal is for the sidebar to appear when a button is clicked and disappear when the close button x is clicked. Despite using a Bootstrap row and column layout, I encountered issues where the sidebar would end up at the bottom of the page and the button wouldn't respond to clicks.
Here's my HTML code:
<body class="container-fluid">
<div class="row>
<div class="col-8">...</div>
<div class="col-4">...</div>
<div id="mySidenav"></div>
</div>
<span id="pr-btn" style="position:fixed;font-size:30px;cursor:pointer">☰ open</span>
</body>.
My CSS looks like this:
#mySidenav {
position: absolute;
width: 0;
right: 0;
height: 100%;
background-color: #123456
}
This is the JQuery code I'm using:
$("#pr-btn").click(() => {
let width = $("#mySidenav").css("width");
if(width == 0) {
$("#mySidenav").css("width", "33.3%");
} else {
$("#mySidenav").css("width", "0");
}
})