As a newcomer to bootstrap, I've been experimenting with converting my sidebar into a button for smaller screen sizes.
I've managed to customize everything to fit my needs except for one thing. When the screen size is reduced (as on mobile devices), the sidebar disappears. What I really want is for the sidebar to still be accessible but through a button.
Here's the HTML and CSS code I'm currently using:
#side-bar {
height: 100%;
background-color: #333f4d;
padding: 0 !important;
font-weight: 600;
color: #d7d9db;
position: fixed;
float: left;
}
#top-bar {
background-color: #1f2730;
padding-top: 15px;
padding-bottom: 3px;
}
#top-bar:hover {
background-color: #aaa;
font-weight: 700;
}
.sidebarclr {
background-color: #fafafa !important;
margin-left: -14px;
}
#logo{
margin-left: 35px;
margin-bottom: 8px;
width:32px;
height:32px;
}
li img{
width:16px;
height:16px;
margin-right: 5px;
}
.list{
text-decoration:none!important;
padding-bottom: 15px;
padding: 10px;
}
#sidebl > li a{
color:#d7d9db !important;
}
#sidebl >li a:hover{
background-color:#aaa !important;
text-decoration:none !important;
}
#sidebl >li a:focus{
background-color:#aaa !important;
text-decoration:none !important;
}
#user{
margin-right: 10px;
margin-left: 10px;
float: left;
}
.userc{
border-radius: 3px;
height:32px;
margin-top:170px;
}
.light{
color: #8f98a3 !important;
font-weight: normal;
font-size:11px!important;
}
.username{
display:inline-block !important;
line-height: 16px;
float: left;
margin-left:5px;
}
.userc:hover{
background-color:#aaa;
text-decoration:none;
}<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
<div class="col-sm-2" id="side-bar">
<div id="top-bar">
<a href="#" title="home page" target="_blank">
<img id="logo" src="images/logo.png" alt="">
<h2 class="title"> Maven Up</h2>
</a>
</div>
<div>
<ul class="nav" id="sidebl">
<li class="list">
<a href="Dashboard.html"><img src="images/icons/006-dashboard.png" alt=""> DashBoard</a>
</li>
<li class="list">
<a href="Entries.html"><img src="images/icons/005-post-it.png" alt=""> Entries</a>
</li>
<li class="list">
<a href="globals.html"><img src="images/icons/004-worlwide.png" alt=""> Globals</a>
</li>
<li class="list">
<a href="Assets.html"><img src="images/icons/003-picture.png" alt="">Assets</a>
</li>
<li class="list">
<a href="user.html"><img src="images/icons/002-users.png" alt=""> Users</a>
</li>
<li class="list">
<a href="#"><img src="images/icons/001-settings.png" alt=""> Setting</a>
</li>
</ul>
</div>
<div class="userc">
<div id="user"><img src="images/user.png" alt=""></div>
<div class="username"> User
<div class="light">admin</div>
</div>
<!--- Navigation Bar User --->
<ul class="nav navbar-nav">
<li class="dropup">
<a href="#" class="dropdown-toggle glyphpadingbot" data-toggle="dropdown"><span class="gaparowup glyphicon glyphicon-chevron-up"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Account Settings</a></li>
<li><a href="#">User stats </a></li>
</ul>
</li>
</ul>
<!--- Navigation Bar End --->
</div>
<!--- userc class div end --->
</div>
<!-- COL SM 2 END -->