Jethro Hazelhurst Jethro Hazelhurst - 2 months ago 19
CSS Question

Bootstrap responsive sidebar resize to icon menu in small screen <800px

Background

Unfortunately I don't have much experience with modern CSS (Media Queries), coming from the world of PHP. As a result I am not sure how to logically troubleshoot my CSS layout issues.

I am trying to create a user dashboard template and have been following a few tutorials. The requirements of this template are as follows:


  1. The main content area is bootstrap responsive

  2. The sidebar is collapsible into a small icon menu

  3. If a screen is less then 800px the sidebar menu is automatically

  4. When the sidebar is collapsed (if the screen is <800px) it can be reopened



What I have cobbled together so far:



$(document).ready(function() {
$('#sidebar-btn').click(function() {
$('#sidebar-wrapper').toggleClass('visible');
$('#wrapper').toggleClass('visible');
});
});

/* navbar */
.navbar {
margin-left:50px;
}

/* main content */
#page-content-wrapper {
width:100%;
position:absolute;
padding:15px;
padding-top:50px;
}

/* sidebar minimized */
#sidebar-wrapper {
background:#444444;
display:block;
position:fixed;
height:100%;
z-index:1;
}
#sidebar-wrapper ul {
margin:0px;
padding:0px;
}
#sidebar-wrapper ul li {
list-style:none;
}
#sidebar-wrapper ul li i {
font-size:24px;
}
#sidebar-wrapper ul li span:nth-child(2) {
display:none;
}
#sidebar-wrapper ul li a {
display:block;
padding:12px 12px;
width:50px;
color:#eeeeee;
background:#222222;
border-bottom:1px solid #444444;
}
#sidebar-wrapper ul li a:hover {
color: #aaaaaa;
background-color: #444444;
text-decoration:none;
}
#sidebar-header {
height:50px;
background:#444444;
}
#sidebar-header h3 {
display:none;
}
#sidebar-btn {
display:inline-block;
vertical-align:middle;
cursor:pointer;
position:absolute;
top:0px;
right:0px;
}
#sidebar-btn i {
font-size:18px;
color:#ffffff;
padding:16px;
}
/* set element styles to fit tablet and higher(desktop) */
@media screen and (min-width: 800px) {
/* sidebar visible */
#sidebar-wrapper.visible {
left:0px;
}
#sidebar-wrapper.visible ul li span:nth-child(2) {
display:inline-block;
}
#sidebar-wrapper.visible ul li i {
color: #777777;
font-size:14px;
min-width: 20px;
text-align: center;
}
#sidebar-wrapper.visible ul li a {
background:#222222;
color:#cccccc;
border-bottom:1px solid #444444;
display:block;
width:200px;
padding:15px;
font-size:14px;
}
#sidebar-wrapper.visible ul li a:hover {
background:#777777;
color:#eeeeee;
}
#sidebar-wrapper.visible h3 {
display:inline-block;
margin:0px;
color:#fff
}
#wrapper.visible #page-content-wrapper {
padding-left:200px;
}
#wrapper.visible .navbar {
margin-left:200px;
}
}

<!-- Latest compiled and minified CSS -->

<script src="https://use.fontawesome.com/3c2244d372.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper" class="visible">
<!-- sidebar -->
<div id="sidebar-wrapper" class="visible">
<div id="sidebar-header">
<h3></h3>
</div>
<ul class="sidebar-nav">
<li><a href="#"><span><i class="fa fa-tachometer"></i></span><span>Dashboard</span></a></li>
<li><a href="#"><span><i class="fa fa-calendar"></i></span><span>Schedule</span></a></li>
<li><a href="#"><span><i class="fa fa-credit-card"></i></span><span>Orders</span></a></li>
<li><a href="#"><span><i class="fa fa-cogs"></i></span><span>Settings</span></a></li>
<li><a href="#"><span><i class="fa fa-life-ring"></i></span><span>Help</span></a></li>
</ul>
<div id="sidebar-btn">
<i class="fa fa-bars" aria-hidden="true"></i>
</div>
</div>
<!-- end sidebar -->

<!-- main content -->
<div id="page-content-wrapper">

<nav class="navbar navbar-fixed-top navbar-inverse">
<div class="container">
<div id="navbar">
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Signed in as</a></li>
</ul>
</div>
</div>
</nav>

<div class="container-fluid">

<div class="row">
<div class="col-md-12">
<h1>Test Page</h1>
<br>
<p>
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
</p>
</div>
</div>

</div>
</div>
</div>





Question

I am having trouble with point four. So far, if I resize my screen the sidebar pops into an icon menu, but I can no longer expand that menu when the screen is in small mode. How I can override the CSS specificity so that when the class of visible is toggled I can view the menu again even when the screen is small.

Answer

It seems to me that you do not have the proper code for displaying #sidebar-wrapper on the screen with max-width of 800px. You declared @media rule:

@media screen and (min-width: 800px)

and nested all the code for displaying sidebar in it, so in this case, Jquery will expand sidebar only when the screen is more than 800px.

Try to do the same thing for

@media (max-width: 800px)

But, as far as I understood, there is no need in media queries in this situation, because you want the same expandable sidebar on all size screens.

UPD
Change you're existing JS code to this one:

$(document).ready(function() {
 if (window.matchMedia('(max-width: 800px)').matches) {

   $('#sidebar-wrapper').removeClass('visible')
   $('#wrapper').removeClass('visible');

   $('#sidebar-btn').click(function() {

     $('#sidebar-wrapper').toggleClass('visible');
     $('#wrapper').toggleClass('visible');
   });  
 } else {
     $('#sidebar-btn').click(function() {

       $('#sidebar-wrapper').toggleClass('visible');
       $('#wrapper').toggleClass('visible');
     });  
   }
});

Also you will need to remove this line:

@media screen and (min-width: 800px) {

and don't forget to remove the closing curly brackets at the end.