<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 ---------->
<nav class="navbar">
<div class="nav-container">
<div class="nav-header">
<div class="logo">
<!-- Logo -->
<a href="#">Furkan Giray</a>
</div>
</div>
<input type="checkbox" id="menu-toggle">
<label for="menu-toggle" class="menu-show"><i class="fa fa-bars"></i></label>
<div class="nav">
<ul class="nav-links">
<li class="nav-item"><a href="#" class="nav-link">Home</a></li>
<li class="nav-item"><a href="#" class="nav-link">About</a></li>
<li class="nav-item has-dropdown">
<a href="#" class="nav-link">Gallery</a>
<ul class="dropdown-menu">
<li class="nav-item"><a class="nav-link" href="#">Photo Gallery</a></li>
<li class="nav-item"><a class="nav-link" href="#">Video Gallery</a></li>
</ul>
</li>
<li class="nav-item"><a href="#" class="nav-link">News</a></li>
<li class="nav-item"><a href="#" class="nav-link">Contact Us</a></li>
<label for="menu-toggle" class="menu-hide"><i class="fa fa-times"></i></label>
</ul>
</div>
</div>
</nav>
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;500;700&display=swap');
* {box-sizing: border-box;}
body {margin:0;}
nav,.navbar{height:100%;width:100%;float:left;padding:20px;background:#6e0009;color:#fff;font-family:'Poppins',sans-serif;}
.navbar .nav-container{width:100%;max-width: 1170px;margin: 0 auto;}
.navbar .nav-header{float:left;padding:10px 0}
.navbar .logo{width:100%;max-width:140px}
.navbar .logo a{font-weight:700;text-decoration:none;color:#fff;font-size:19px}
.navbar .logo img{max-width:100%}
.navbar .nav-links{margin:0;float:right}
.navbar .nav-links .nav-item{position:relative;list-style:none;float:left}
.navbar .nav-links .nav-item .nav-link{padding:10px 15px;text-transform:uppercase;display:block;text-decoration:none;color: #fff;}
.navbar .menu-show,.menu-hide{transition:.4s;font-size:30px;cursor:pointer;display:none}
.navbar .menu-show{margin:0;float:right}
.navbar .nav-link:hover,.menu-show:hover,.menu-hide:hover{color:gray}
.navbar #menu-toggle{position:absolute;visibility:hidden;z-index:-1}
@media (min-width: 768px){
.navbar .has-dropdown ul {position: absolute;left: inherit;top: 100%;width: 270px;padding: 0;border: unset;z-index: 100;opacity: 0;visibility: hidden;background-color: #fff;-moz-transform: translateY(30px);-webkit-transform: translateY(30px);-ms-transform: translateY(30px);-o-transform: translateY(30px);transform: translateY(30px);-webkit-box-shadow: 2px 2px 5px 1px rgba(0,0,0,.05), -2px 0 5px 1px rgba(0,0,0,.05);-ms-box-shadow: 2px 2px 5px 1px rgba(0,0,0,.05),-2px 0 5px 1px rgba(0,0,0,.05);-o-box-shadow: 2px 2px 5px 1px rgba(0,0,0,.05),-2px 0 5px 1px rgba(0,0,0,.05);-moz-box-shadow: 2px 2px 5px 1px rgba(0,0,0,.05),-2px 0 5px 1px rgba(0,0,0,.05);box-shadow: 2px 2px 5px 1px rgba(0,0,0,.05), -2px 0 5px 1px rgba(0,0,0,.05);-webkit-transform-origin: top;-ms-transform-origin: top;transform-origin: top;-webkit-transition: all 500ms ease;-moz-transition: all 500ms ease;-ms-transition: all 500ms ease;-o-transition: all 500ms ease;transition: all 500ms ease;}
.navbar .has-dropdown:hover ul {visibility:visible;opacity:1;-moz-transform:translateY(0);-webkit-transform:translateY(0);-ms-transform:translateY(0);-o-transform:translateY(0);transform:translateY(0);transition:all 500ms ease;-moz-transition:all 500ms ease;-webkit-transition:all 500ms ease;-ms-transition:all 500ms ease;-o-transition:all 500ms ease;display:block!important}
.navbar .has-dropdown ul li {width: 100%;position: relative;display: block;line-height: 24px;font-weight: 500;font-size: 15px;text-transform: capitalize;color: #222;border-bottom: 1px solid rgba(34,34,34,.1);text-align: left;transition: all 500ms ease;-moz-transition: all 500ms ease;-webkit-transition: all 500ms ease;-ms-transition: all 500ms ease;-o-transition: all 500ms ease;}
.navbar .has-dropdown ul li a {position: relative;display: block;padding: 15px 30px!important;line-height: 24px;font-weight: 500;font-size: 13px;text-transform: capitalize;color: #6e0009!important;border-bottom: 1px solid rgba(34,34,34,.1);text-align: left;transition: all 500ms ease;-moz-transition: all 500ms ease;-webkit-transition: all 500ms ease;-ms-transition: all 500ms ease;-o-transition: all 500ms ease;}
.navbar .has-dropdown ul li a:hover{background:#6e0009;color: #fff!important;}
}
@media (max-width:767px) {
.navbar .menu-show,.menu-hide{display:block;}
.navbar .nav-links{position:fixed;width:100%;height:100vh;top: 0;left:-100%;padding:50px 0;transition:1s;background:#6e0009}
.navbar .nav-links .nav-item{width:100%}
.navbar .nav-links .nav-item .nav-link{padding:15px;text-align: center;}
.navbar .menu-hide{position:absolute;top:15px;right:20px}
.navbar #menu-toggle:checked ~ .nav .nav-links{left:0}
.navbar .has-dropdown ul{display:none}
.navbar .dropdown-menu{margin:0;padding:0;border:1px solid #0000001c;flex-direction: column;}
.navbar .dropdown-menu li:not(:last-child){border-bottom: 1px solid #0000001c;}
.navbar .nav-links .has-dropdown .dropdown-menu .nav-link{font-size: 13px}
}
// Used jquery v3.5.1 and font-awesome v4.7.0
$(document).ready(function() {
$('.nav .dropdown-menu').prev('a').on('click', function(e) {
e.preventDefault();
$(this).parent().find('.dropdown-menu').slideToggle();
});
});
