<div class="header1 position-relative">
<div class="container">
<!-- Header 1 code -->
<nav class="navbar navbar-expand-lg h1-nav">
<a class="navbar-brand" href="#"><img src="https://www.wrappixel.com/demos/ui-kit/wrapkit/assets/images/logos/green-logo.png" alt="wrapkit" /></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#header1" aria-expanded="false" aria-label="Toggle navigation">
<span class="icon-menu"></span>
</button>
<div class="collapse navbar-collapse" id="header1">
<ul class="navbar-nav ml-auto mt-2 mt-lg-0">
<li class="nav-item active"><a class="nav-link" href="#">Home</a></li>
<li class="nav-item"><a class="nav-link" href="#">About Me</a></li>
<li class="nav-item"><a class="nav-link" href="#">Work</a></li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="h1-dropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Services <i class="icon-arrow-down font-12 ml-1"></i>
</a>
<ul class="b-none border-0 dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
<li class="divider" role="separator"></li>
<li class="dropdown-submenu position-relative"> <a class="dropdown-toggle dropdown-item" data-toggle="dropdown" href="#">Dropdown <i class="icon-arrow-right float-right font-12 mt-1"></i></a>
<ul class="dropdown-menu b-none border-0 menu-right">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
<li class="divider" role="separator"></li>
<li><a class="dropdown-item" href="#">Separated link</a></li>
<li class="divider" role="separator"></li>
<li><a class="dropdown-item" href="#">One more separated link</a></li>
</ul>
</li>
<li><a class="dropdown-item" href="#">Separated link</a></li>
<li class="divider" role="separator"></li>
<li><a class="dropdown-item" href="#">One more separated link</a></li>
</ul>
</li>
<li class="nav-item"><a class="nav-link" href="#">Freebies</a></li>
<li class="nav-item"><a class="btn btn-outline-success py-2 px-4" href="#">Hire Me</a></li>
</ul>
</div>
</nav>
<!-- End Header 1 code -->
</div>
</div>
@import url(//fonts.googleapis.com/css?family=Montserrat:300,400,500,600,700,800);
.header1 {
font-family: "Montserrat", sans-serif;
color: #8d97ad;
font-weight: 300;
}
.header1 h1,
.header1 h2,
.header1 h3,
.header1 h4,
.header1 h5,
.header1 h6 {
color: #3e4555;
}
.header1 .btn-outline-success {
color: #2cdd9b;
background-color: transparent;
border-color: #2cdd9b;
}
.header1 .btn-outline-success:hover {
background: #2cdd9b;
border-color: #2cdd9b;
color: #ffffff;
}
.header1 .font-12 {
font-size: 12px;
}
.header1 .dropdown-item {
padding: 8px 1rem;
color: #8d97ad;
}
.header1 .h1-nav .navbar-nav .nav-item .nav-link {
padding: 12px 0px;
color: #8d97ad;
font-weight: 400;
}
.header1 .h1-nav .navbar-nav .nav-item .nav-link:hover {
color: #2cdd9b;
}
.header1 .h1-nav .navbar-nav .nav-item {
margin: 0 20px;
}
@media (min-width: 1024px) {
.header1 .navbar-nav>.dropdown .dropdown-menu {
min-width: 210px;
margin-top: 0px;
}
.header1 .dropdown-submenu:hover>.dropdown-menu {
display: block;
}
}
.header1 .dropdown-toggle::after {
display: none;
}
.header1 .dropdown-submenu>.dropdown-menu.menu-right {
left: auto;
right: 100%;
top: 0;
}
.header1 .navbar-nav .dropdown-menu.b-none {
-webkit-box-shadow: 0px 0px 30px rgba(115, 128, 157, 0.1);
box-shadow: 0px 0px 30px rgba(115, 128, 157, 0.1);
}
jQuery(document).on('click', '.navbar-nav > .dropdown', function(e) {
e.stopPropagation();
});
$(".dropdown-submenu").click(function() {
$(".dropdown-submenu > .dropdown-menu").toggleClass("show");
});