<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous"> <nav class="navbar fixed-top navbar-expand-lg navbar-light bg-light"> <a class="navbar-brand" href="#"> <img src="${pageContext.request.contextPath}/resources/img/logo.png" alt="" height="20"> LOGO </a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarText"> <ul class="navbar-nav side-nav"> <li data-toggle="collapse" data-target="#products1" class="nav-item collapsed active"> <a href="#"><i class="fas fa-th-list"></i> Menu <span class="arrow"></span></a> </li> <ul class="sub-menu collapse" id="products1"> <li class="active"><a href="#">Bootstrap</a></li> <li><a href="#">Option1</a></li> <li><a href="#">Option2</a></li> <li><a href="#">Option3</a></li> </ul> <li data-toggle="collapse" data-target="#products2" class="nav-item collapsed active"> <a href="#"><i class="fas fa-th-list"></i> Menu2 <span class="arrow"></span></a> </li> <ul class="sub-menu collapse" id="products2"> <li class="active"><a href="#">Bootstrap</a></li> <li><a href="#">Option1</a></li> <li><a href="#">Option2</a></li> <li><a href="#">Option3</a></li> </ul> <li> <a href="#"><i class="far fa-file-alt"></i> Document </a> </li> </ul> <ul class="navbar-nav top-nav justify-content-end"> <li class="nav-item active"> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> </li> <li class="nav-item"> <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">ACCESS<span class="carset"></span></a> <ul class="dropdown-menu"> <li><a href="login.jsp">LOG ON</a></li> <li><a href="join.jsp">JOIN</a></li> </ul> </li> </ul> </div> </nav>

body{background:#fff;} #wrapper{padding:90px 15px;} .navbar-expand-lg .navbar-nav.side-nav{ flex-direction: column; } @media(min-width:992px) { #wrapper{margin-left: 200px;padding: 70px 15px 15px;} .navbar-nav.side-nav{background: #585f66;position:fixed;flex-direction: column;left:0;width:200px;overflow-y:auto;bottom:0;overflow-x:hidden;padding-bottom:40px} .navbar-nav.top-nav{right:0; position:absolute;} .navbar-brand{ z-index: 1; padding: 0px 0px 0px 60px; color: #fff; font-weight: bold; } .navbar-nav.side-nav { overflow: visible; font-family: Nunito,sans-serif; font-size: .9375rem; font-weight: bold; background: linear-gradient(135deg,#8f75da 0,#727cf5 60%); position: fixed; padding: 80px 30px; height: 100%; width: 17%; color: #e1ffff; } .navbar-nav.side-nav ul, .navbar-nav.side-nav li { list-style: none; line-height: 35px; cursor: pointer; } .navbar-nav.side-nav li .arrow:before { font-family: 'Font Awesome 5 Free'; content: "\f105"; display: inline-block; padding-left: 10px; padding-right: 10px; vertical-align: middle; float: right; font-weight: 900; } .navbar-nav.side-nav ul .sub-menu li.active, .navbar-nav.side-nav li .sub-menu li.active { color: #d19b3d; } .navbar-nav.side-nav ul .sub-menu li.active a, .navbar-nav.side-nav li .sub-menu li.active a { color: #d19b3d; } .navbar-nav.side-nav ul .sub-menu li, .navbar-nav.side-nav li .sub-menu li { background-color: #181c20; border: none; line-height: 28px; border-bottom: 1px solid #23282e; margin-left: 0px; } .navbar-nav.side-nav ul .sub-menu li:hover, .navbar-nav.side-nav li .sub-menu li:hover { background-color: #020203; } .navbar-nav.side-nav ul .sub-menu li:before, .navbar-nav.side-nav li .sub-menu li:before { font-family: 'Font Awesome 5 Free'; content: "\f105"; display: inline-block; padding-left: 10px; padding-right: 10px; vertical-align: middle; font-weight: 900; } .navbar-nav.side-nav li { padding-left: 0px; } .navbar-nav.side-nav li a { text-decoration: none; color: #cedce4; display: block; } .navbar-nav.side-nav li a i { padding-left: 10px; width: 20px; padding-right: 20px; margin: 0 10px 0 3px; } .navbar-nav.side-nav li:hover { background-color: #4f5b69; color: #fff; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; -ms-transition: all 1s ease; transition: all 1s ease; } .navbar-nav.side-nav li a:hover { color: #fff; } .navbar-nav.side-nav li span{ vertical-align: middle; } .navbar-nav.side-nav li[aria-expanded="true"] .arrow:before { -webkit-transform: rotate(90deg); transform: rotate(90deg); } .sub-menu li a{ padding: 8px 20px 8px 8px; display: block; } .navbar-nav.side-nav .nav-item{ padding-bottom: 7px; } .logo { display: block; line-height: 80px; } }