I have managed to maintain a format like I am comfortable with when there is a full screen. However, when the screen gets smaller, the sidebar collapses, and is reachable by the hamburger button, the format completely changes when I click on the button to display the sidebar. How do I maintain the format of the sidebar? Here is the html:
<div class="container">
<div class="row">
<!--Collapsable navbar-->
<div class="sidebar-nav">
<div class="navbar navbar-default" role="navigation">
<div class="navbar-header" >
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".sidebar-navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<span class="visible-xs navbar-brand">Logo</span>
</div>
<div class="navbar-collapse collapse sidebar-navbar-collapse">
<button type="button" class="btn btn-default">
<span class="glyphicon glyphicon-menu-left leftarrow" aria-hidden="true"></span>
</button>
<ul class="nav navbar-nav mylist" style="align-items:center">
<!-- logo-->
<img src="https://s3.amazonaws.com/crowdhoster/uploads/settings/logo_images/000/000/001/original.png?1410418498" width="80" height="30" margin-left="90">
<br>
<br>
<!--User icon to add in profile picture-->
<div class="row" style="align-items:center">
<div class="img-circle usericon" >
<img src="http://i.stack.imgur.com/dolAE.png" class="img-circle img-responsive usericon tint">
<div class="caption">
<label for='picture'>
<img src="http://i.stack.imgur.com/XMojX.png" style="cursor:pointer">
</label>
<form action="demo_form.asp" style='display: none;'>
<input type="file" name="pic" accept=".gif,.jpg,.png,.tif|image/*" id='picture'>
<input type="submit">
</form>
</div>
</div>
</div>
<br>
<br>
<p style="font-size:22px; line-height: 8px">userN</p>
<p style="font-size:14px">emailAddress</p>
<!-- Navbar menu -->
<li><a style="cursor:pointer" go-click="/dashboard">Dashboard</a></li>
<li><a style="cursor:pointer" go-click="/keyholder">People</a></li>
<li><a style="cursor:pointer" go-click="/devices">Devices</a></li>
<li><a style="cursor:pointer" go-click="/about">About</a></li>
<li><a style="cursor:pointer" go-click="/notifications">Notifications</a></li>
<li><a style="cursor:pointer" go-click="/analytics">Analytics</a></li>
</ul>
<a class="nav navbar-nav logout" style="cursor:pointer; align-items:center" go-click="/signout">Log Out</a>
</div><!--/.nav-collapse -->
</div>
</div>
<div class="col-sm-9">
</div>
</div>
</div>
Many thanks in advance. Let me know if you require any of the css as there are some classes in that block of code that apply to the formatting.
css:
@media (min-width: 768px) {
.sidebar-nav .navbar .navbar-collapse {
padding-top: 24px;
background-color: #FFFFFF;
border-radius: 16px !important;
max-height: none;
position: absolute;
border-width: thin;
border-style: solid;
border-color: #f44336 !important;
}
.sidebar-nav .navbar ul {
width: 235px;
height: 676px;
color: #f44336;
background-color: #FFFFFF;
font-family: 'Roboto';
font-size: 16px;
text-align: center;
float: none;
display: block;
}
.sidebar-nav .navbar li {
float: none;
display: block;
}
.sidebar-nav .navbar li a {
padding-top: 12px;
color: #f44336;
background-color: #FFFFFF;
font-family: 'Roboto';
text-align: center;
font-size: 16px;
padding-bottom: 12px;
}
You have this in your bootstrap css:
@media (min-width: 768px){
.navbar-nav>li {
float: left;
}
}
Just add float left to your .nav > li:
.nav>li {
position: relative;
display: block;
float: left;
}
Change in class .nav > li from
.nav > li {
position: relative;
display: block;
}
to
.nav > li {
position: relative;
display: inline-block;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.