<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <nav class="navbar navbar-inverse sidebar" role="navigation"> <div class="collapse navbar-collapse" id="bs-sidebar-navbar-collapse-1"> <ul class="nav navbar-nav"> <li><a href="#">Home<span style="font-size:16px;" class="pull-right hidden-xs showopacity glyphicon glyphicon-home"></span></a></li> <li ><a href="#">Profile<span style="font-size:16px;" class="pull-right hidden-xs showopacity glyphicon glyphicon-user"></span></a></li> <li ><a href="#">Messages<span style="font-size:16px;" class="pull-right hidden-xs showopacity glyphicon glyphicon-envelope"></span></a></li> </ul> </div> </nav>

/*small/medium side display*/ @media (min-width: 768px) { /* nav.sidebar .navbar-nav > li{ border-bottom: 1px #e5e5e5 solid; } */ /*allows nav box to use 100% width*/ nav.sidebar .navbar-collapse, nav.sidebar .container-fluid{ padding: 0 0px 0 0px; } /*gives sidebar width/height*/ nav.sidebar{ width: 200px; height: 100%; margin-left: -160px; float: left; z-index: 8000; margin-bottom: 0px; } /*give sidebar 100% width;*/ nav.sidebar li { width: 100%; } } /* .....NavBar: Fully showing nav bar..... */ @media (min-width: 1330px) { /*Allow main to be next to Nav*/ .main{ width: calc(100% - 200px); /*keeps 100% minus nav size*/ margin-left: 200px; } /*Show all nav*/ nav.sidebar{ margin-left: 0px; float: left; } /*Show hidden items on nav*/ nav.sidebar .forAnimate{ opacity: 1; } } nav.sidebar .navbar-nav .open .dropdown-menu>li>a:hover, nav.sidebar .navbar-nav .open .dropdown-menu>li>a:focus { color: #CCC; background-color: transparent; } nav:hover .forAnimate{ opacity: 1; } section{ padding-left: 15px; }

IconMenuLateralUser=["fa-power-off"]; function MenuLateraLUser(){ document.write('<li><a href='#'><span style='font-size:16px;'' class='fa "'"> Sair</span></a></li>"); }