"Untitled"
Bootstrap 4.1.1 Snippet by divyalahad

Post to Facebook Tweet this

<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 ----------> <!DOCTYPE html> <html lang="en"> <head> <!-- Meta --> <meta charset="UTF-8" /> <title>Smooth navigation</title> <!-- Styles --> <link rel="stylesheet" href="styles/index.processed.css"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> </head> <body> <header class="main-header"> <div class="container"> <nav class="navbar navbar-expand-lg main-nav px-0"> <a class="navbar-brand" href="/mojo"> <img src="https://indior.tours/images-static/indior_transperent%20cropped.png" alt="indiortours.com"> </a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#mainMenu" aria-controls="mainMenu" aria-expanded="false" aria-label="Toggle navigation"> <span class="icon-bar icon-bar-1"></span> <span class="icon-bar icon-bar-2"></span> <span class="icon-bar icon-bar-3"></span> </button> <div class="collapse navbar-collapse" id="mainMenu"> <ul class="navbar-nav ml-auto text-uppercase f1"> <li> <a href="#home" class="active active-first">home</a> </li> <li> <a href="#about">about us</a> </li> <li> <a href="#service">services</a> </li> <li> <a href="#project">projects</a> </li> <li> <a href="#team">team</a> </li> <li> <a href="#testimony">testimonils</a> </li> <li> <a href="#contact">contact</a> </li> </ul> </div> </nav> </div> <!-- /.container --> </header> <!-- Wow! What do you want to build? You have so many possibilities right now... Looking for something to kick off? How about a simple folio page to show off everything you're going to make! --> <!-- Bootstrap core JavaScript ================================================== --> <!-- Placed at the end of the document so the pages load faster --> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> <!-- Scripts --> <script src="scripts/index.js"></script> </body> </html>
/** * index.scss * - Add any styles you want here! */ body { background: #2d2d7f !important; } /* main-header start */ [data-target="#mainMenu"] { position: relative; z-index: 999; } #mainMenu li > a { font-size: 12px; letter-spacing: 1px; color: #fff; font-weight: 400; position: relative; z-index: 1; text-decoration: none; } .main-header.fixed-nav #mainMenu li > a { color: #fff; text-decoration: none; } #mainMenu li:not(:last-of-type) { margin-right: 30px; } #mainMenu li > a::before { position: absolute; content: ""; width: calc(100% - 1px); height: 1px; background: #fff; bottom: -6px; left: 0; -webkit-transform: scale(0, 1); -ms-transform: scale(0, 1); transform: scale(0, 1); -webkit-transform-origin: right center; -ms-transform-origin: right center; transform-origin: right center; z-index: -1; -webkit-transition: transform 0.5s ease; transition: transform 0.5s ease; } #mainMenu li > a:hover::before, #mainMenu li > a.active::before { -webkit-transform: scale(1, 1); -ms-transform: scale(1, 1); transform: scale(1, 1); -webkit-transform-origin: left center; -ms-transform-origin: left center; transform-origin: left center; } .main-header.fixed-nav #mainMenu li > a::before { background: #000; } .main-header { position: fixed; top: 25px; left: 0; z-index: 99; width: 100%; -webkit-transition: all 0.4s ease; transition: all 0.4s ease; } .main-header.fixed-nav { top: 0; background: #fff; -webkit-box-shadow: 0 8px 12px -8px rgba(0, 0, 0, 0.09); box-shadow: 0 8px 12px -8px rgba(0, 0, 0, 0.09); -webkit-transition: all 0.4s ease; transition: all 0.4s ease; } .main-header.fixed-nav .navbar-brand > img:last-of-type { display: block; } .main-header.fixed-nav .navbar-brand > img:first-of-type { display: none; } .navbar-brand { color: #fff; } .main-header .navbar-brand img { max-width: 100px; animation: fadeInLeft 0.4s both 0.4s; } /* main-header end */ @media (max-width: 991px) { /*header starts*/ .collapse.in { display: block !important; padding: 0; clear: both; } .navbar-toggler { margin: 0; padding: 0; width: 40px; height: 40px; position: absolute; top: 25px; right: 0; border: none; border-radius: 0; outline: none !important; } .main-header .navbar { float: none; width: 100%; padding-left: 0; padding-right: 0; text-align: center; } .main-header .navbar-nav { margin-top: 70px; } .main-header .navbar-nav li .nav-link { text-align: center; padding: 20px 15px; border-radius: 0px; } /**/ .main-header .navbar-toggler .icon-bar { background-color: #fff; margin: 0 auto 6px; border-radius: 0; width: 30px; height: 3px; position: absolute; right: 0; -webkit-transition: all 0.2s ease; transition: all 0.2s ease; } .main-header .navbar .navbar-toggler .icon-bar:first-child { margin-top: 3px; } .main-header .navbar-toggler .icon-bar-1 { width: 10px; top: 0px; } .main-header .navbar-toggler .icon-bar-2 { width: 16px; top: 12px; } .main-header .navbar-toggler .icon-bar-3 { width: 20px; top: 21px; } .main-header .current .icon-bar { margin-bottom: 5px; border-radius: 0; display: block; } .main-header .current .icon-bar-1 { width: 18px; } .main-header .current .icon-bar-2 { width: 30px; } .main-header .current .icon-bar-3 { width: 10px; } .main-header .navbar-toggler:hover .icon-bar { background-color: #fff; } .main-header .navbar-toggler:focus .icon-bar { background-color: #fff; } /*header ends*/ }

Related: See More

Paper Kit 2

Questions / Comments: