CODEWITHSUNDEEP
javascriptjqueryhtmlcsstwitter-bootstrap
Mohammad Areeb Siddiqui
Mohammad Areeb Siddiqui

Reputation: 10189

Adding collapsible sidebar

So I have created my website using Bootstrap. I want to add a facebook-like collapsible sidebar. I have tried to divide my website into two columns. One for the sidebar and other for the whole website using col-md-2 and col-md-10 but the problem that was occurring was the site was being overflown towards the right side. This is what I did:

<html>

    <head></head>

    <body>
        <div class="container">
            <div class="col-md-2">...Sidebar...</div>
            <div class="col-md-10">...Rest of the website...</div>
        </div>
    </body>

</html>

But the site was overflowing towards the right side. I tried that with many other col-* but to no avail. I also added .clearfix class to the body but still could not fix the overflowing issue.

Q1. How can I fix the overflowing issue?

Secondly, I want to make the sidebar collapsible. I thought I would do that by hiding the col-md-2 and changing the class of the website holder div to col-md-12 and reversing the thing when the user un-collapses the sidebar but the problem I know that would be occurring is that I would not be having a smooth sliding effect.

Q2. How could I make a collapsible siderbar with a smooth slide effect?

Demo of what's happening.

Upvotes: 2

Views: 162

Answers (1)

The Wilhelm
The Wilhelm

Reputation: 26

Q1: Have you tried adding a row after the container?

<div class="contianer">
   <div class="row">
      <div class="col-md-2">...Sidebar...</div>
      <div class="col-md-10">...Content...</div>
   </div>
</div>

Q2: You can create you sider bar off the top of the screen and animate it in using jquery to slide it down to where you want it when the menu button is clicked.

Upvotes: 1

Related Questions