I have implemented a nav-side-menu in my HTML page that remains fixed at the top and left of the screen. My goal is to make it collapse to the left side and display a button with three bars when viewed on smaller screens, without disappearing completely. I want it to function similarly to how the sidebar collapses when the window is resized as shown here: . Here is the progress I have made so far:
.nav-side-menu {
overflow: auto;
font-family: verdana;
font-size: 12px;
font-weight: 200;
background-color: #2e353d;
position: fixed;
top: 100px;
width: 210px;
height: 100% !important;
color: #033c73;
}
.nav-side-menu .brand {
background-color: #23282e;
line-height: 50px;
display: block;
text-align: center;
font-size: 14px;
}
.nav-side-menu .toggle-btn {
/*display: none;*/
}
.nav-side-menu ul,
.nav-side-menu li {
list-style: none;
margin: 0px;
line-height: 15px;
cursor: pointer;
padding-left: 10px;
}
.nav-side-menu ul :not(collapsed) .arrow:before,
.nav-side-menu li :not(collapsed) .arrow:before {
font-family: FontAwesome;
content: "\f078";
display: inline-block;
padding-left: 10px;
padding-right: 10px;
vertical-align: middle;
float: right;
}
.nav-side-menu ul .active,
.nav-side-menu li .active {
border-left: 3px solid #d19b3d;
background-color: #4f5b69;
}
.nav-side-menu ul .sub-menu li.active,
.nav-side-menu li .sub-menu li.active {
color: #d19b3d;
}
.nav-side-menu ul .sub-menu li.active a,
.nav-side-menu li .sub-menu li.active a {
color: #d19b3d;
}
@media (max-width: 767px) {
.nav-side-menu {
margin-bottom: 10px;
margin-top: 100px;
z-index: 10 !important;
display: none;
}
.nav-side-menu .toggle-btn {
display: block;
cursor: pointer;
position: absolute;
right: 10px;
top: 10px;
z-index: 10 !important;
padding: 3px;
background-color: #ffffff;
color: #000;
width: 40px;
text-align: center;
}
.brand {
text-align: left !important;
font-size: 22px;
padding-left: 20px;
line-height: 50px !important;
}
}
@media (min-width: 767px) {
.nav-side-menu .menu-list .menu-content {
display: block;
}<body>
<h1>Hello, world!</h1>
<nav class="navbar-inverse" role="navigation">
<div class="nav-side-menu sticky-top" style="padding-top: 100px">
<ul class="nav navbar-nav nav-pills nav-stacked">
<li>
<a href="" class="nav-link expanded" data-toggle="collapse" style="padding-top:10px;padding-bottom:10px;font-size:15px;font-weight:bold;color:white;background-color:#2e353d;cursor:default">
Profile
</a>
<ul class="flex-column nav">
<li class="nav-item">
<a style="padding-top:10px;padding-bottom:10px;font-size:15px;" class="nav-link" href="Profile/Item1">Item 1</a>
</li>
<li class="nav-item">
<a style="padding-top:10px;padding-bottom:10px;font-size:15px;" class="nav-link" href="Profile/Item2">Item 2</a>
</li>
<li class="nav-item">
<a style="padding-top:10px;padding-bottom:10px;font-size:15px;" class="nav-link" href="Profile/Item3">Item 3</a>
</li>
<li class="nav-item">
<a style="padding-top:10px;padding-bottom:10px;font-size:15px;" class="nav-link" href="Profile/Item4">Item 4</a>
</li>
</ul>
</li>
</ul>
</div>
<div class="navbar-header" style="padding-top: 0px">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".nav-side-menu">
<span class="icon-bar">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
</div>
</nav>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
</body>Your assistance with this matter would be greatly appreciated. Thank you.
Edit: I have successfully managed to hide and show the side menu when resizing the window, as well as displaying the toggle button on smaller screens. However, if the menu is toggled off in a small screen and the window is resized, how can I make the menu reappear?