How to collapse a sidebar on small screens?

Question

I'm making a fixed sidebar but it won't collapse.. I really don't know how to do it.
I have searched on the internet .. still couldn't find any results.

here is my sidebar.html

<div class="container-fluid" style="background-color:#19334d">
<div class="sidebar" id="sidebar">
    <div class="pt-5 text-center pb-2 ">
        <a href="../index.php" class="logo-normal pr-3">
            <img src='../assets/img/favicon.ico' width="50px">
        </a>
        <a href="../index.php" class="logo-normal">
            Fitness Addict 
        </a>
    </div>
    <hr style="border-color:white; width:90%" align=center>
    <ul class="nav pl-4">
        <li >
            <a href="../home/myhome.php">
                <i class="fa fa-home icon pr-4"></i>
                My Home
            </a>
        </li>                
        .
        .
        .
    </ul>
</div>

The css:

.sidebar{
  height: calc(100vh - 90px);
  width: 230px;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1;
  background-size: cover;
  background-position: center center;
  display: block;
  background: #408000;
  box-shadow: 0px 0px 45px 0px rgba(0, 0, 0, 0.6);
  margin-top: 80px;
  margin-left: 20px;
  border-radius: 5px;
}

.sidebar .nav {
 margin-top: 20px;
 display: block;
}

I have tried to do it through JavaScript but I don't know how to make it. anyone can help?

Answer 1

Your JavaScript might look like this:

/* Set the width of the sidebar to 250px and the left margin of the page content to 250px */

function openNav() 
{
document.getElementById("sidebar").style.width = "250px";
document.getElementById("main").style.marginLeft = "250px";
}

/* Set the width of the sidebar to 0 and the left margin of the page content to 0 */

function closeNav() 
{
document.getElementById("sidebar").style.width = "0";
document.getElementById("main").style.marginLeft = "0";
}

And then you'd need to add this JS as source on the HTML using relevant code. Via W3Schools tutorial on creating a collapsible sidebar.

You might also want to have a look here at the awesome responsive sidebar tutorial on W3Schools .

Answer 2

collapsed:

max-width: 0;

not collapsed:

max-width: auto;

Answer 3

you can add property to sidebar

tranform:translateX(-100%);

when sidebar is active add class active using js and add css

sidebar.active{
    tranform:translateX(0%);
}

to the parent of side bar add property

.parent{
    overflow-x:hidden;
}

Answer 4

not collapsed:

.sidebar {
    transition: left 0.3s ease-out;
}

collapsed via adding class 'hide' :

.sidebar.hide {
    left: -295px;
}

-295px because width is 230px, margin-left is 20px and box-shadow has blur 45px

Answer 5

You could use css and the transition property.

in .css:

.sidebar {
  // your current code
  left: -210px; // example
  transition: left 2s ease;
}

.sidebar:hover{
  left: 0px;
}

This will let your div slide in over 2 seconds and disapear when not hoovered anymore.
See an example here .

Answer 6

Try Bootstrap, its made for creating responsive websites for all devices with little hassle, and you can find lots of other cool options! check out their documentation

Answer 7

You can use media queries to detect screen size, and then hide the sidebar at smaller sizes:

 .sidebar{ height: calc(100vh - 90px); width: 230px; position: fixed; top: 0; left: 0; z-index: 1; background-size: cover; background-position: center center; display: block; background: #408000; box-shadow: 0px 0px 45px 0px rgba(0, 0, 0, 0.6); margin-top: 80px; margin-left: 20px; border-radius: 5px; } .sidebar .nav { margin-top: 20px; display: block; } @media (max-width: 400px) { .sidebar { display: none; } }

 <div class="container-fluid" style="background-color:#19334d"> <div class="sidebar" id="sidebar"> <div class="pt-5 text-center pb-2 "> <a href="../index.php" class="logo-normal pr-3"> <img src='../assets/img/favicon.ico' width="50px"> </a> <a href="../index.php" class="logo-normal"> Fitness Addict </a> </div> <hr style="border-color:white; width:90%" align=center> <ul class="nav pl-4"> <li > <a href="../home/myhome.php"> <i class="fa fa-home icon pr-4"></i> My Home </a> </li> </ul> </div>