"Navigaiton with cross line"
Bootstrap 4.1.1 Snippet by koshikojha

<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 ----------> <div class="header" style="background: #0f1d2b"> <div class="container"> <div class="row"> <div class="col-xl-4 col-lg-4 d-xl-flex d-lg-flex align-items-center"> <div class="row"> <div class="col-xl-12 col-lg-12 col-6 d-xl-block d-lg-block d-flex align-items-center"> <div class="logo"> </div> </div> <div class="d-xl-none d-lg-none d-block col-6"> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <i class="fas fa-bars"></i> </button> </div> </div> </div> <div class="col-xl-8 col-lg-8"> <div class="mainmenu"> <nav class="navbar navbar-expand-lg"> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav mr-auto"> <li class="nav-item"> <a class="nav-link active" href="#">About <span class="sr-only">(current)</span></a> </li> <li class="nav-item"> <a class="nav-link" href="#">Event</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Gallery</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Top DJ</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Schedule</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Blog</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Faq</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Contact</a> </li> </ul> </div> </nav> </div> </div> </div> </div> </div>
.header { position: absolute; left: 0; top: 0; z-index: 55; width: 100%; border-bottom: 1px solid rgba(255, 255, 255, 0.2); } .header .logo a { display: inline-block; } .header .mainmenu .navbar { padding: 0; float: right; } .header .mainmenu .navbar .navbar-nav .nav-item .nav-link { padding: 31px 0; font-family: "Poppins", sans-serif; font-size: 14px; font-weight: 500; margin-right: 30px; color: #fff; position: relative; } .header .mainmenu .navbar .navbar-nav .nav-item .nav-link:before { position: absolute; content: ''; width: 0px; height: 0px; left: 50%; top: 50%; -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); margin-top: -2px; border-radius: 50%; margin-left: -25px; opacity: 0; -webkit-transition: all 0.3s ease-in; -moz-transition: all 0.3s ease-in; -o-transition: all 0.3s ease-in; transition: all 0.3s ease-in; background-image: -webkit-linear-gradient(0deg, #ff6975 0%, #d34d94 56%, #a730b2 100%); } .header .mainmenu .navbar .navbar-nav .nav-item .nav-link:hover:before, .header .mainmenu .navbar .navbar-nav .nav-item .nav-link.active:before { width: 50px; height: 4px; -webkit-transform: rotate(30deg); -ms-transform: rotate(30deg); transform: rotate(30deg); opacity: .8; } .header .mainmenu .navbar .navbar-nav .nav-item:last-child .nav-link { margin-right: 0px; } @media only screen and (min-width: 768px) and (max-width: 991px) { /* header */ .header { background: #020c16; border: none; position: relative; } .header button.navbar-toggler { width: 45px; height: 45px; border: 1px solid rgba(255, 255, 255, 0.2); font-size: 25px; outline: none; color: #fff; padding: 0; float: right; margin: 15px 0; } .header .mainmenu .navbar { float: none; } .header .mainmenu .navbar .navbar-nav .nav-item .nav-link { padding: 16px 15px; position: relative; background: #020c16; margin-right: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.2); z-index: 2; } .header .mainmenu .navbar .navbar-nav .nav-item .nav-link:after { position: absolute; content: ''; left: 0; top: 0; width: 100%; height: 100%; background-image: -webkit-linear-gradient( 0deg, rgb(255,105,117) 0%, rgb(211,77,148) 56%, rgb(167,48,178) 100%); opacity: .2; z-index: -1; } .header .mainmenu .navbar .navbar-nav .nav-item:last-child .nav-link { margin-bottom: 15px; border-bottom: none; } .header .mainmenu .navbar .navbar-nav .nav-item .nav-link:before { display: none; }} @media only screen and (min-width: 576px) and (max-width: 767px) { /* header */ .header { background: #020c16; border: none; position: relative; } .header button.navbar-toggler { width: 45px; height: 45px; border: 1px solid rgba(255, 255, 255, 0.2); font-size: 25px; outline: none; color: #fff; padding: 0; float: right; margin: 15px 0; } .header .mainmenu .navbar { float: none; } .header .mainmenu .navbar .navbar-nav .nav-item .nav-link { padding: 16px 15px; position: relative; background: #020c16; margin-right: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.2); z-index: 2; } .header .mainmenu .navbar .navbar-nav .nav-item .nav-link:after { position: absolute; content: ''; left: 0; top: 0; width: 100%; height: 100%; background-image: -webkit-linear-gradient( 0deg, rgb(255,105,117) 0%, rgb(211,77,148) 56%, rgb(167,48,178) 100%); opacity: .2; z-index: -1; } .header .mainmenu .navbar .navbar-nav .nav-item:last-child .nav-link { margin-bottom: 15px; border-bottom: none; }} @media only screen and (min-width: 480px) and (max-width: 575px) { /* header */ .header { background: #020c16; border: none; position: relative; } .header button.navbar-toggler { width: 45px; height: 45px; border: 1px solid rgba(255, 255, 255, 0.2); font-size: 25px; outline: none; color: #fff; padding: 0; float: right; margin: 15px 0; } .header .mainmenu .navbar { float: none; } .header .mainmenu .navbar .navbar-nav .nav-item .nav-link { padding: 16px 15px; position: relative; background: #020c16; margin-right: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.2); z-index: 2; } .header .mainmenu .navbar .navbar-nav .nav-item .nav-link:after { position: absolute; content: ''; left: 0; top: 0; width: 100%; height: 100%; background-image: -webkit-linear-gradient( 0deg, rgb(255,105,117) 0%, rgb(211,77,148) 56%, rgb(167,48,178) 100%); opacity: .2; z-index: -1; } .header .mainmenu .navbar .navbar-nav .nav-item:last-child .nav-link { margin-bottom: 15px; border-bottom: none; } .header .mainmenu .navbar .navbar-nav .nav-item .nav-link:before { display: none; } } @media only screen and (min-width: 320px) and (max-width: 479px) { /* header */ .header { background: #020c16; border: none; position: relative; } .header button.navbar-toggler { width: 45px; height: 45px; border: 1px solid rgba(255, 255, 255, 0.2); font-size: 25px; outline: none; color: #fff; padding: 0; float: right; margin: 15px 0; } .header .mainmenu .navbar { float: none; } .header .mainmenu .navbar .navbar-nav .nav-item .nav-link { padding: 16px 15px; position: relative; background: #020c16; margin-right: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.2); z-index: 2; } .header .mainmenu .navbar .navbar-nav .nav-item .nav-link:after { position: absolute; content: ''; left: 0; top: 0; width: 100%; height: 100%; background-image: -webkit-linear-gradient( 0deg, rgb(255,105,117) 0%, rgb(211,77,148) 56%, rgb(167,48,178) 100%); opacity: .2; z-index: -1; } .header .mainmenu .navbar .navbar-nav .nav-item:last-child .nav-link { margin-bottom: 15px; border-bottom: none; } .header .mainmenu .navbar .navbar-nav .nav-item .nav-link:before { display: none; }}

Related: See More


Questions / Comments: