My Background
My experience lies primarily in PHP rather than modern CSS, particularly Media Queries. This has left me feeling uncertain about how to effectively troubleshoot CSS layout issues.
Currently, I am working on developing a user dashboard template by following various tutorials. The key requirements for this template are:
- The main content area should be bootstrap responsive
- The sidebar must have the ability to collapse into a compact icon menu
- If the screen size is less than 800px, the sidebar menu should automatically collapse
- When the screen size is below 800px and the sidebar is collapsed, it should still be expandable
What I've Managed 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;
}
/* more CSS styles ... */ <!-- 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>The Question at Hand
Point four is currently presenting an issue for me. While I can successfully collapse the sidebar into an icon menu upon resizing the screen, I struggle to expand the menu again when in small mode. How can I adjust the CSS specificity so that toggling the visible class allows me to view the menu even on a small screen?