javascript - Button to the left side of navbar-brand -
i trying put button on left side of navbar-brand toggling sidebar. button toggles sidebar. in desktop mode, works fine on smaller screens, changes position , comes right side of navbar-brand. here screenshots.
<nav class="navbar navbar-inverse navbar-fixed-top"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar"> <span class="sr-only">toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <button type="button" data-toggle="#sidebar" id="sidebar-toggle" class="navbar-left navbar-toggle"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="login.aspx" style="vertical-align: middle"> <img src="logo.png" style="vertical-align: middle" /></a> <label class="navbar-text text-center text-primary" style="vertical-align:10px;font-size:medium">example distribution</label> </div> <div class="navbar-collapse collapse" id="navbar"> <ul class="nav navbar-nav navbar-right"> <li><a href="#">dashboard</a></li> <li><a href="#">settings</a></li> <li><a href="#">profile</a></li> <li><a href="#">help</a></li> </ul> <form class="navbar-form navbar-right"> <input type="text" class="form-control" placeholder="search..." /> </form> </div> </div> </nav> <div class="container-sidebar"> <div id="sidebar"> <ul> <li><a href="#">home</a></li> <li><a href="#">explore</a></li> <li><a href="#">users</a></li> <li><a href="#">sign out</a></li> </ul> </div> </div>
just add code on document.ready
there might css alternative feel easy!
$(document).ready(function(){ if($(window).width()<768) { $('#sidebar-toggle').css('float','left'); } $(window).on('resize',function(){ if($(window).width()<768) { console.log('here'); $('#sidebar-toggle').css('float','left'); } }); });
css solution:
@media screen , (max-width: 768px) { #sidebar-toggle{ float:left !important; } }
updated demo
Comments
Post a Comment