My website has a menu layout that features a logo on the left and an icon for the menu on the right side. When the icon is clicked, the menu slides in from the right side of the window, and when clicked again, it slides out. However, I am facing two issues:
1) The sidebar does not slide correctly when the logo is positioned below the icon (it works fine when above).
2) I would like the sidebar to slide up from the bottom of the icon rather than from the right side.
I am using Bootstrap 3 for this implementation.
HTML Code:
<div id="wrapper" class="toggled">
<div id="sidebar-wrapper">
<ul class="sidebar-nav">
<li class="sidebar-brand"><a href="#">eKincare Menu</a></li>
<li style="color:white;">Menu Item</li>
<li style="color:white;">Menu Item</li>
<li style="color:white;">Menu Item</li>
<li style="color:white;">Menu Item</li>
<li style="color:white;">Menu Item</li>
</ul>
</div>
<div id="page-content-wrapper" style="margin:0;">
<div class="container-fluid" style="padding:0;">
<nav class="navbar navbar-default" role="navigation" style="background-color:#00bcd3; !important">
<div class="container-fluid">
<ul class="nav navbar-nav navbar-right" style="color:white;">
<li>
<a href="#menu-toggle" id="menu-toggle">
<i class="icon icon-menu pull-right">
<img src="https://cdn1.iconfinder.com/data/icons/android-user-interface-vol-1/16/38_-_menu_bar_lines_option_list_hamburger_web-128.png" width=50 height=30 style="padding-left:5px;">
</i>
</a>
</li>
<li><img src="logo.png" alt="Logo"></li>
</ul>
</div>
</nav>
</div>
</div>
</div>
CSS Code:
#wrapper {
display:block;
padding-right: 250px;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#sidebar-wrapper {
z-index: 1000;
position: fixed;
right: 250px;
height: 100%;
margin-right: -250px;
overflow-x: hidden;
background: #000;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#sidebar-wrapper {
width: 250px;
}
#page-content-wrapper {
z-index:10;
width: 100%;
position: absolute;
margin-left: -250px;
}
.sidebar-nav {
position: absolute;
top: 0;
width: 250px;
margin: 0;
padding: 0;
list-style: none;
}
.sidebar-nav li {
text-indent: 20px;
line-height: 40px;
padding-right: 17%;
}
.sidebar-nav li a {
display: block;
text-decoration: none;
color: #999999;
}
#wrapper.toggled {
padding-right: 0;
}
#wrapper.toggled #sidebar-wrapper {
width: 0;
}
#page-content-wrapper {
position: relative;
}
#wrapper.toggled #page-content-wrapper {
position: relative;
}
JS Code:
$(document).ready(function(){
$("#menu-toggle").click(function (e) {
e.preventDefault();
$("#wrapper").toggleClass("toggled");
});
});
The logo-image used as a "list-item" should be placed above the menu-icon for proper functionality. You can access the example here.
Update: The sliding bar issue was resolved due to my mistake.
In the mobile version, I aim to make the menu bar slide up from below instead of the right side similar to the default Bootstrap navbar. Any insights on how to achieve this are appreciated.