Bootstrap Header 2

Header Section with bootstrap framework

by juErik

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/simple-line-icons/2.4.1/css/simple-line-icons.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<div class="header2 bg-success-gradiant">
  <div class="">
    <!-- Header 1 code -->
    <nav class="navbar navbar-expand-lg h2-nav">
      <a class="navbar-brand" href="#"><img src="https://www.wrappixel.com/demos/ui-kit/wrapkit/assets/images/logos/white-logo.png" alt="wrapkit" /></a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#header2" aria-controls="header2" aria-expanded="false" aria-label="Toggle navigation">
				<span class="icon-menu"></span>
			</button>
      <div class="collapse navbar-collapse hover-dropdown" id="header2">
        <ul class="navbar-nav">
          <li class="nav-item active"><a class="nav-link" href="#">Home</a></li>
          <li class="nav-item dropdown position-relative">
            <a class="nav-link dropdown-toggle" href="#" id="h2-dropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
							Product <i class="icon-arrow-down ml-1 font-12"></i>
						</a>
            <ul class="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><a class="dropdown-item" href="#">Separated link</a></li>
              <li class="divider" role="separator"></li>
              <li><a class="dropdown-item" href="#">One more separated...

CSS

@import url(//fonts.googleapis.com/css?family=Montserrat:300,400,500,600,700,800);
.header2 {
  font-family: "Montserrat", sans-serif;
  color: #8d97ad;
  font-weight: 300;
}

.header2 h1,
.header2 h2,
.header2 h3,
.header2 h4,
.header2 h5,
.header2 h6 {
  color: #3e4555;
}

.header2.bg-success-gradiant {
    background: #2cdd9b;
    background: -webkit-linear-gradient(legacy-direction(to right), #2cdd9b 0%, #1dc8cc 100%);
    background: -webkit-gradient(linear, left top, right top, from(#2cdd9b), to(#1dc8cc));
    background: -webkit-linear-gradient(left, #2cdd9b 0%, #1dc8cc 100%);
    background: -o-linear-gradient(left, #2cdd9b 0%, #1dc8cc 100%);
    background: linear-gradient(to right, #2cdd9b 0%, #1dc8cc 100%);
}

.header2 .font-12 {
  font-size: 12px;
}

.header2 .dropdown-item {
  padding: 8px 1rem;
  color: #8d97ad;
}

.header2 .h2-nav .navbar-nav .nav-item .nav-link {
    padding: 12px 0px;
    color: #ffffff;
    font-weight: 400;
}

.header2 .h2-nav .navbar-nav .nav-item .nav-link:hover {
    color: #263238;
}

.header2 .h2-nav .navbar-nav .nav-item {
  margin: 0 20px;
}

@media (min-width: 1024px) {
  .header2 .navbar-nav>.dropdown .dropdown-menu {
    min-width: 210px;
    margin-top: 0px;
  }
  .header2 .dropdown-submenu:hover>.dropdown-menu {
    display: block;
  }
}

.header2 .dropdown-toggle::after {
  display: none;
}

.header2 .dropdown-submenu>.dropdown-menu.menu-right {
  left: auto;
  right: 100%;
  top: 0;
}

@media (min-width: 1024px) {
	.header2 .hover-dropdown .navbar-nav > .dropdown:hover > .dropdown-menu {
			display: block;
			margin-top: 0px;
	}
}

.header2 .btn-dark {
    color: #fff;
    background-color: #343a40;
    border-color: #343a40;
}

.header2 .btn-dark:hover {
    color: #fff;
    background-color: #23272b;
    border-color: #1d2124;
}

.header2 .h2-nav .navbar-nav .nav-item .btn {
    opacity: 0.5;
}

.header2 .h2-nav .navbar-nav .nav-item .btn:hover {
    opacity: 1;
}

.header2 .dropdown-submenu > .dropdown-menu {
 ...

JavaScript

jQuery(document).on('click', '.navbar-nav > .dropdown', function(e) {
   e.stopPropagation();
 });
 $(".dropdown-submenu").click(function() {
   $(".dropdown-submenu > .dropdown-menu").toggleClass("show");
 });