What is the best way to ensure a bootstrap sidebar collapses without altering the content width?

How can I create a bootstrap sidebar collapse without affecting the content width?

To view my code, please visit Codepen

$(document).ready(function() {
  $('#sidebarCollapse').on('click', function() {
    $('#sidebar').toggleClass('active');
   });
});
 <!-- CSS code here --> 
<!-- Bootstrap and jQuery links here -->
<!-- HTML structure for sidebar and content here -->

I attempted to use the following code but it caused the toggler button to disappear.

#content {
    position: fixed;
    z-index: -1;
}

I want my sidebar to resemble the one on this page

Thank you in advance.

csstwitter-bootstrapbootstrap-4

Answer №1

Hopefully this information is useful.

#sidebar {
    position: fixed;
    top:0;
    bottom:0;
    z-index:1;
}

Also, include an overlay with the following CSS:

.overlay{
  display:block;
  position:fixed;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background-color:rgba(0,0,0,0.5)
}


$(document).ready(function() {
  $('#sidebarCollapse').on('click', function() {
    $('#sidebar').toggleClass('active');
    $('.overlay').toggle();
  });

  $('.overlay').click(function() {
    $('#sidebar').toggleClass('active');
    $('.overlay').toggle();
  });
});
@import "https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700";
body{font-family: 'Poppins', sans-serif;
     background: #fafafa}
p{font-family: 'Poppins', sans-serif;
  font-size: 1.1em;
font-weight: 300;
line-height: 1.7em;
color: #999;
}
a,
a:hover,
a:focus{
color: inherit;
text-decoration: none;
transition: all 0.3s;
}
.navbar{
padding: 15px 10px;
background: #fff;
border: none;
border-radius: 0;
margin-bottom: 40px;
box-shadow: 1px 1px 3px rgba(0,0,0,0.1);
}

.navbar-btn{
box-shadow: none;
outline: none!important;
border: none;
}

.line{
width: 100%;
height: 1px;
border-bottom: 1px dashed #ddd;
}

.wrapper {
    display: flex;
    width: 100%;
    align-items: stretch;
}
#sidebar {
    min-width: 250px;
    max-width: 250px;
    background: #7386D5;
    color: #fff;
    transition: all 0.3s;
    position: fixed;
    top:0;
    bottom:0;
    z-index:1;
}
#sidebar.active{
margin-left: -250px;
}

#sidebar .sidebar-header{
padding: 20px;
background: #6d7fcc;
}
...

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet" />
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>

<div class="wrapper">
      ...
  </nav>

  <div class="content">
    ...

    [Content continuation]

    ...

  </div>
</div>
<div class="overlay"></div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Animate the leftward disappearance of a div to make it vanish

My goal is to create a user interface where users can navigate through different divs. Here is the HTML code: <article id="realize" class="realizeBox"> <div class="shown"> <div class="heading"> <h2>Realisati ...

javascriptjqueryhtmlcssjquery-animate

What is the best way to align dynamically generated divs seamlessly together?

After creating a function that generates a grid of divs placed in a container div upon document load or user reset, I noticed a gap between each row of divs. I aim for a flawless grid where each square aligns perfectly with the next. Despite trying vario ...

javascriptjquerycss

Adaptive stationary slideable navigation bar

By utilizing Bootstrap, I have successfully implemented a sidebar feature. Initially, only the Font Awesome icon is visible, but upon hovering, it smoothly slides to the left revealing more content. Challenge: Unfortunately, the sidebar lacks responsivene ...

htmlcsstwitter-bootstrap

Tips for creating a more flexible HTML container and resizing the navbar for mobile devices

In my current HTML code, I have 3 "col-md-4" divs within a row, each with a container--wrap to fill the webpage with 3 equally sized containers. These divs are placed inside another div with class = container-fluid. When I resize the window, the containers ...

htmlcssbootstrap-4

What is the purpose of adding this webkit CSS rule?

Whenever I open Chrome developer tools, I come across something that puzzles me. I always assumed that a CSS property is crossed out when it's overwritten by another class. However, I found myself in this peculiar situation: https://i.sstatic.net/Xm ...

cssgoogle-chrome-devtoolsweb-frontend

Arrange the elements in an HTML table with the first and last columns on the left and right sides

Is it feasible to have the first and last columns of an HTML table fixed while allowing the middle columns to be scrollable? (This functionality is achievable in jQuery DataTables, but what about a basic HTML table?) ...

htmlcsshtml-tablesticky

What methods are available to keep a component in a fixed position on the window during certain scrolling intervals?

I need help creating a sidebar similar to the one on this Airbnb page. Does anyone have suggestions for how to make a component stay fixed until you scroll past a certain section of the page? I am working with functional React and Material-UI components, ...

cssreactjstypescriptmaterial-uifrontend

Designing a nested box layout with bootstrap HTML/CSS styling

Can anyone provide guidance on how to create a HTML/CSS layout similar to the image below? I am specifically struggling with designing the silver "Add corkscrew" box, a white box beneath it, and then another silver box nested within. Any suggestions on ho ...

htmlcss

Why does Bootstrap v4 distinguish between theme-color and standard color variables?

Bootstrap v4.0.0.beta.2 introduces color maps allowing the use of theme-color("primary") instead of $brand-primary. If I am adding my own custom CSS and want to utilize Bootstrap colors, what is the benefit of using the theme-color function over directly ...

csstwitter-bootstrapsassbootstrap-4

Error message: jQuery is not recognized after implementing Bootstrap Template

I've been working on an MVC project and decided to integrate a Bootstrap theme called Argon. I included all the necessary Argon CSS and JavaScript files in Bundle.Config and successfully integrated them, allowing me to make use of Argon HTML elements. ...

jqueryasp.net-mvcjquery-uibootstrap-4datepicker

Overflowing is the width of Bootstrap's Grid Row

I managed to create this layout using only Bootstrap 5, without any CSS customization. Below is the HTML code I used: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name=&quo ...

cssbootstrap-5

When the React button is clicked, it displays a stylish blue border

Hey there, I'm currently working on a project using React and facing an issue with some buttons I've styled. Whenever I click on them, they show a strange blue border that I can't seem to get rid of. I've tried setting border:none !impo ...

cssreactjsbuttonsassreact-bootstrap

Intrigued by the prospect of making HTML elements vanish or smoothly glide along with the content without obstructing it

I'm a beginner in coding and I want to make my website impressive. Right now, I have an HTML embedded element called "On this Page" that I would like to disappear when the user scrolls down the page. I've managed to position the element on the ...

htmlcss

Creating Responsive Images with Bootstrap at Specific Breakpoints

As a newcomer to Bootstrap, I am embarking on my first website creation experience. The header of my site is designed to look like the image below: https://i.sstatic.net/WTp2g.jpg I want this image to adjust responsively on medium-sized and larger device ...

htmlcssbootstrap-4

Show the selected checkbox options upon clicking the submit button

Having trouble setting up a filter? I need to create a feature where checked values from checkboxes are displayed in a specific div after submitting. The display should include a 'Clear All' button and individual 'X' buttons to remove e ...

javascriptjquerycsscheckbox

How do I handle a Flask request from an HTML form that is returning a None value?

I am unable to retrieve the value on request in my Flask application. Instead of the expected value, it is returning None. Despite trying to change the method, I am still facing this issue. Here is the Flask code snippet: @app.route("/login/user/book") ...

pythonhtmlflaskbootstrap-4jinja2

Pre-loading custom fonts in Next.js for a smoother user experience

I am currently utilizing next.js. My objective is to ensure that the fonts are loaded before any content is displayed on the screen. I attempted to achieve this by including them in the Head component within the _.document file using the rel="prelo ...

javascriptcsstypescriptnext.jsstyled-components

Tips for placing a fixed footer at the bottom of a container with absolute positioning

I've set up my website container as a white box on a black background, centered on the page to allow for content resizing. Here is the code I used: .container { position: absolute; background-color: white; min-height: 90%; top: 5%; width: 9 ...

htmlcsssasshamlsticky-footer

Creating a Text Design with a Right Arrow Symbol using HTML and CSS

I am looking to create a minimalist design using bootstrap, html, and css. The design should resemble the image found at this link: https://i.sstatic.net/WIgHJ.png I have attempted the following code to achieve the design: <div class="contain ...

htmlcssbootstrap-4

Challenges with responsive layout of flex items

Utilizing Tailwind CSS, I have designed this div element: https://i.sstatic.net/FDloP.png However, an issue arises when the div is resized: https://i.sstatic.net/Sq309.png Using white-space: nowrap causes it to extend beyond the div boundaries. https://i ...

htmlcssflexboxtailwind-css