<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.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"> <link href="https://fonts.googleapis.com/css?family=Roboto:100,400,400i,700" rel="stylesheet"> <div class="nav-side-menu"> <div class="nav-header"> </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"> <div class="brand">HesamKaveh</div> <div class="my-work">Web developer</div> <img class="personal-image" src="https://lh3.googleusercontent.com/-WvjNPQlmmQM/AAAAAAAAAAI/AAAAAAAAAAA/scgNhs46rNA/photo.jpg"> <li> <a href="#"> <i class="fa fa-dashboard fa-lg"></i> Dashboard </a> </li> <li data-toggle="collapse" data-target="#products" class="collapsed active-menu"> <a href="#"><i class="fa fa-gift fa-lg"></i> UI Elements <span class="arrow"></span></a> </li> <ul class="sub-menu collapse" id="products"> <li class="active"><a href="#">CSS3 Animation</a></li> <li><a href="#">General</a></li> <li><a href="#">Buttons</a></li> <li><a href="#">Tabs & Accordions</a></li> <li><a href="#">Typography</a></li> <li><a href="#">FontAwesome</a></li> <li><a href="#">Slider</a></li> <li><a href="#">Panels</a></li> <li><a href="#">Widgets</a></li> <li><a href="#">Bootstrap Model</a></li> </ul> <li data-toggle="collapse" data-target="#service" class="collapsed"> <a href="#"><i class="fa fa-globe fa-lg"></i> Services <span class="arrow"></span></a> </li> <ul class="sub-menu collapse" id="service"> <li>New Service 1</li> <li>New Service 2</li> <li>New Service 3</li> </ul> <li data-toggle="collapse" data-target="#new" class="collapsed"> <a href="#"><i class="fa fa-car fa-lg"></i> New <span class="arrow"></span></a> </li> <ul class="sub-menu collapse" id="new"> <li>New New 1</li> <li>New New 2</li> <li>New New 3</li> </ul> <li> <a href="#"> <i class="fa fa-user fa-lg"></i> Profile </a> </li> <li> <a href="#"> <i class="fa fa-users fa-lg"></i> Users </a> </li> </ul> </div> </div>

*{ font-family:robot; } .nav-side-menu { overflow: auto; font-family: verdana; font-size: 12px; font-weight: 200; background-color: #ffffff; position: fixed; top: 0px; width: 300px; height: 100%; color: #000000; box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12); } .nav-side-menu .brand { background-color: #ffffff; line-height: 70px; display: block; text-align: center; font-size: 18px; } .nav-side-menu .toggle-btn { display: none; } .nav-side-menu ul, .nav-side-menu li { list-style: none; padding: 0px; margin: 0px; line-height: 50px; cursor: pointer; /* .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; } .active-menu { background-color: #F7F7F7 !important; } .active-menu:hover{ background-color: #EBEBEB !important; } .nav-side-menu ul .active:hover { background-color: #E2686D !important; transition: 0s; } .nav-side-menu ul .active, .nav-side-menu li .active { border-left: 3px solid #d19b3d; background-color: #EE6E73 !important; transition: 0s; } .nav-side-menu ul .sub-menu li.active, .nav-side-menu li .sub-menu li.active { color: #ffffff; } .nav-side-menu ul .sub-menu li.active a, .nav-side-menu li .sub-menu li.active a { color: #ffffff; } .nav-side-menu ul .sub-menu li, .nav-side-menu li .sub-menu li { background-color: #ffffff; border: none; line-height: 45px; /* border-bottom: 1px solid #23282e;*/ margin-left: 0px; padding-left: 30px } .nav-side-menu ul .sub-menu li:hover, .nav-side-menu li .sub-menu li:hover { background-color: #F6F6F6; } .nav-side-menu ul .sub-menu li:before, .nav-side-menu li .sub-menu li:before { font-family: FontAwesome; content: "\f105"; display: inline-block; padding-left: 10px; padding-right: 10px; vertical-align: middle; } .nav-side-menu li { padding-left: 0px; border-left: 3px solid white; /* border-bottom: 1px solid #23282e;*/ } .nav-side-menu li a { text-decoration: none; color: #000000; } .nav-side-menu li a i { padding-left: 10px; width: 20px; padding-right: 20px; } .nav-side-menu li:hover { border-left: 3px solid #EE6E73; background-color: #F6F6F6; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; -ms-transition: all 0.5s ease; transition: all 0.5s ease; } @media (max-width: 767px) { .header{ display: none !important; } .nav-side-menu { position: relative; width: 100%; margin-bottom: 10px; } .nav-side-menu .toggle-btn { display: block; cursor: pointer; position: absolute; right: 10px; top: 10px; z-index: 10 !important; padding: 3px; background-color: #ffffff; color: #000; width: 40px; text-align: center; } .brand { text-align: center; font-size: 22px; padding-left: 20px; line-height: 70px !important; } } @media (min-width: 767px) { .nav-side-menu .menu-list .menu-content { display: block; } .nav-header{ display: none !important; } .header{ padding-left: 300px; } } body { margin: 0px; padding: 0px; } .personal-image { border-radius: 100%; max-width: 100%; max-height: 150px; display: block; margin: auto; transition: all linear 0.5s ; } .header, .nav-header { width: 100%; background-color: red; min-height: 50px; background-color: #ee6e73; display: block; } .personal-image:hover{ opacity:0.9; transition: all linear 0.5s ; } .my-work { background-color: #ffffff; line-height: 50px; display: block; text-align: center; font-size: 14px; font-weight: 100; font-style: italic; }