"Bootstrap 4 Navigation Bar with Animation"
Bootstrap 4.0.0 Snippet by webcoderskull

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/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 navbar-expand-sm bg-light navbar-light"> <ul class="navbar-nav"> <li class="nav-item active"> <a class="nav-link" href="#">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="#">About</a></a> </li> <li class="nav-item"> <a class="nav-link" href="#">Portfilo</a> </li> <li class="nav-item dropdown" > <a class="nav-link " data-toggle="dropdown" href="#">Services</a> <ul class="dropdown-menu"> <li><a href="#">Website Designing</a></li> <li><a href="#">Website Development</a></li> <li><a href="#">Content Writing</a></li> <li><a href="#">PPC Services</a></li> <li><a href="#">SMO</a></li> <li><a href="#">SEO</a></li> </ul> </li> <li class="nav-item"> <a class="nav-link" href="#">Contact</a> </li> </ul> </nav>
body{ width:80%; margin:auto; background-color:#000; } navbar{ padding: 0px!important; -webkit-box-shadow: 4px 9px 25px -6px rgba(77,77,77,0.61); -moz-box-shadow: 4px 9px 25px -6px rgba(77,77,77,0.61); box-shadow: 4px 9px 25px -6px rgba(77,77,77,0.61); } ul.dropdown-menu{ width: 11vw; border-radius: 0px; font-weight: 400; font-size: 0.9em; line-height: 16px; text-decoration: none; padding: 0px; list-style-type: none; -webkit-animation: mymove 0.5s; animation: mymove 0.5s; background-color: #fff; -webkit-box-shadow: 4px 9px 25px -6px rgba(77,77,77,0.61); -moz-box-shadow: 4px 9px 25px -6px rgba(77,77,77,0.61); box-shadow: 4px 9px 25px -6px rgba(77,77,77,0.61); } li.dropdown:hover ul.dropdown-menu{ display: block; } .dropdown-menu li:hover a{ color: #ec5626; } .dropdown-menu li{ border-bottom: 1px solid #ccc; padding: 20px; display:block; } .dropdown-menu li a{ color: #444; text-decoration: none; text-transform: capitalize; } @keyframes mymove { from { left: 100px; height: 0px; opacity: 0; border-bottom:0px; } to { height: auto; } } .navbar-nav a.nav-link{ font-family: 'Roboto', sans-serif; text-transform: uppercase; padding: 0px !important; } ul.navbar-nav li.nav-item{ margin: 0 20px; } ul.navbar-nav .nav-item:after { content: ''; display: block; height: 3px; width: 0; transition: width .5s ease, background-color .5s ease; } .navbar-nav .nav-item:hover:after { width: 100%; background:#eb3719; }

Related: See More


Questions / Comments: