<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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 href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"> <div class="nav-side-menu"> <div class="brand">Brand Logo</div> <i class="fa fa-bars fa-2x toggle-btn" data-toggle="collapse" data-target="#menu-content"></i> <div class="menu-list"> <ul id="menu-content" class="menu-content collapse out"> <li> <a href="#"><i class="fa fa-dashboard fa-lg fa-fw sidebar-icon"></i> Dashboard</a> </li> <li> <a href="#"><i class="fa fa-calendar fa-lg fa-fw sidebar-icon"></i> Scheduler</a> </li> <li> <a href="#"><i class="fa fa-bar-chart fa-lg fa-fw sidebar-icon"></i> Statistics</a> </li> <li data-toggle="collapse" data-target="#manage" class="collapsed"> <a href="#"><i class="fa fa-puzzle-piece fa-lg fa-fw sidebar-icon"></i> Manage <span class="arrow"></span></a> </li> <ul class="sub-menu collapse" id="manage"> <li><a href="#"><i class="fa fa-angle-double-right"></i> Devices</a></li> <li><a href="#"><i class="fa fa-angle-double-right"></i> Groups</a></li> <li><a href="#"><i class="fa fa-angle-double-right"></i> SIM Cards</a></li> <li><a href="#"><i class="fa fa-angle-double-right"></i> Users</a></li> </ul> <li data-toggle="collapse" data-target="#settings" class="collapsed"> <a href="#"><i class="fa fa-sliders fa-lg fa-fw sidebar-icon"></i> Settings <span class="arrow"></span></a> </li> <ul class="sub-menu collapse" id="settings"> <li><a href="#"><i class="fa fa-angle-double-right"></i> General</a></li> <li><a href="#"><i class="fa fa-angle-double-right"></i> Security</a></li> <li><a href="#"><i class="fa fa-angle-double-right"></i> Notifications</a></li> </ul> <li data-toggle="collapse" data-target="#maintenance" class="collapsed"> <a href="#"><i class="fa fa-cogs fa-lg fa-fw sidebar-icon"></i> Maintenance <span class="arrow"></span></a> </li> <ul class="sub-menu collapse" id="maintenance"> <li><a href="#"><i class="fa fa-angle-double-right"></i> Operation Logs</a></li> <li><a href="#"><i class="fa fa-angle-double-right"></i> Events and Alarms</a></li> <li><a href="#"><i class="fa fa-angle-double-right"></i> Backup and Restore</a></li> </ul> <li data-toggle="collapse" data-target="#tools" class="collapsed"> <a href="#"><i class="fa fa-wrench fa-lg fa-fw sidebar-icon"></i> Tools <span class="arrow"></span></a> </li> <ul class="sub-menu collapse" id="tools"> <li><a href="#"><i class="fa fa-angle-double-right"></i> Manual SMS</a></li> <li><a href="#"><i class="fa fa-angle-double-right"></i> Import</a></li> <li><a href="#"><i class="fa fa-angle-double-right"></i> Export</a></li> </ul> <li data-toggle="collapse" data-target="#help" class="collapsed"> <a href="#"><i class="fa fa-life-ring fa-lg fa-fw sidebar-icon"></i> Help <span class="arrow"></span></a> </li> <ul class="sub-menu collapse" id="help"> <li><a href="#"><i class="fa fa-angle-double-right"></i> Documentation</a></li> <li><a href="#"><i class="fa fa-angle-double-right"></i> Customer Support <small><i class="fa fa-external-link"></i></small></a></li> </ul> </ul> </div> </div> <div class="main"> test </div>

body { margin: 0px; padding: 0px; background-color: #ebedef; } .main { margin-left: 220px; padding: 15px; } .nav-side-menu { overflow: auto; background-color: #2e353d; position: fixed; top: 0px; width: 220px; height: 100%; color: #e1ffff; } .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; padding: 0px; margin: 0px; line-height: 4rem; cursor: pointer; visibility: visible !important; } /* .collapsed{ .arrow:before{ font-family: FontAwesome; content: "\f053"; display: inline-block; padding-left:10px; padding-right: 10px; vertical-align: middle; float:right; } } */ .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 li i.sidebar-icon { margin-right: 0.6rem; font-size: 1.5em; } .nav-side-menu ul .active, .nav-side-menu li .active { border-left: 3px solid #e1ffff; background-color: #4f5b69; } .nav-side-menu li { padding-left: 0px; border-left: 3px solid #2e353d; border-bottom: 1px solid #23282e; } .nav-side-menu li a { display: block; text-decoration: none; color: #e1ffff; } .nav-side-menu li a i { padding-left: 10px; width: 20px; padding-right: 20px; } .nav-side-menu li:hover { border-left: 3px solid #e1ffff; background-color: #4f5b69; -webkit-transition: all .6s ease; -moz-transition: all .6s ease; -o-transition: all .6s ease; -ms-transition: all .6s ease; transition: all .6s ease; } .nav-side-menu ul .sub-menu li.active, .nav-side-menu li .sub-menu li.active { background-color: #000; } .nav-side-menu ul .sub-menu li, .nav-side-menu li .sub-menu li { background-color: #181c20; border: none; line-height: 3.4rem; border-bottom: 1px solid #23282e; margin-left: 0px; } .nav-side-menu ul .sub-menu li:hover, .nav-side-menu li .sub-menu li:hover { background-color: #020203; } .nav-side-menu li .sub-menu li a, .nav-side-menu ul .sub-menu li a{ display: block; padding-left: 20px; } .nav-side-menu ul .sub-menu li a i, .nav-side-menu li .sub-menu li a i{ padding-right: 10px !important; } @media (max-width: 767px) { .main { margin-left: 0 !important; padding: 0 15px 15px 15px; } .nav-side-menu { position: relative; width: 100%; margin-bottom: 10px; } .nav-side-menu .toggle-btn { display: block; cursor: pointer; position: absolute; right: 10px; top: 7px; z-index: 10 !important; padding: 3px; width: 40px; text-align: center; background-color: #2e353d; border-radius: 4px; } .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; } }