CODEWITHSUNDEEP
csstwitter-bootstrap
Rahul Iyer
Rahul Iyer

Reputation: 21005

How to prevent sidebar from disappearing?

I'm trying to work with the template on this page:

https://getbootstrap.com/docs/3.3/examples/dashboard/

If you look at this section:

<div class="container-fluid">
      <div class="row">
        <nav class="col-sm-3 col-md-2 d-none d-sm-block bg-light sidebar">

You will find that when you reduce the width of the browser window, after a point the sidebar disappears.

The problem is that there will then be no way to click on the links in the sidebar. So how does one prevent the sidebar from disappearing, or atleast change it like the "navbar" on top of the page -> It disappears, but by clicking on the hamburger button, one can see the links.

Is there any class that I can use in bootstrap that does this ?

Upvotes: 0

Views: 3036

Answers (3)

Valery Ramusik
Valery Ramusik

Reputation: 1573

We can override sidebar disappearing by adding class "show" in bootstrapp 3

<nav class="sidebar show">

Or we can make collapse in bootstrapp 3:

<div class="col-xs-6 col-xs-offset-5 hidden-lg hidden-md hidden-sm">

   <a data-toggle="collapse" data-target="#sidebar" >
      <i class="icon-paragraph-justify3"></i></a>
</div>

<nav class="sidebar collapse" id="sidebar">

Upvotes: 1

Yadhu Babu
Yadhu Babu

Reputation: 1521

The issue is in in your dashboard.css line number: 33

.sidebar {
    display: none;
}

Just Remove it

Upvotes: 1

Laura
Laura

Reputation: 278

If you inspect the code, you can see this: 

/* Hide for mobile, show later */
.sidebar {
  display: none;
}

@media (min-width: 768px) {
.sidebar {
  position: fixed;
  top: 51px;
  bottom: 0;
  left: 0;
  z-index: 1000;
  display: block;
  padding: 20px;
  overflow-x: hidden;
  overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
  background-color: #f5f5f5;
  border-right: 1px solid #eee;
  }
}

This is essentially hiding the sidebar until you get to 768 pixels wide, where it then becomes fixed to the left. You can remove or overwrite the display: none; with your own code for mobile.

Upvotes: 1

Related Questions