"dynamic-header"
Bootstrap 4.0.0 Snippet by Hoss

<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="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <header id="header"> <div class="container"> <div id="logo" class="pull-left"> <h1><a href="#intro" class="scrollto">HEADER</a></h1> <!-- Uncomment below if you prefer to use an image logo --> <!-- <a href="#intro"><img src="img/logo.png" alt="" title="" /></a>--> </div> <nav id="nav-menu-container"> <ul class="nav-menu"> <li class="menu-active"><a href="">Home</a></li> <li><a href="">About Us</a></li> <li><a href="">Login</a></li> <li><a href="">Register</a></li> <li class="menu-has-children"><a href="">Drop Down</a> <ul> <li><a href="#">Drop Down 1</a></li> <li><a href="#">Drop Down 3</a></li> <li><a href="#">Drop Down 4</a></li> <li><a href="#">Drop Down 5</a></li> </ul> </li> <li class="menu-has-children"><a href="">Drop Down</a> <ul> <li><a href="#">Drop Down 1</a></li> <li><a href="#">Drop Down 3</a></li> <li><a href="#">Drop Down 4</a></li> <li><a href="#">Drop Down 5</a></li> </ul> </li> <!-- <li><a href="">Contact</a></li> --> </ul> </nav><!-- #nav-menu-container --> </div> </header><!-- #header -->
#header.header-scrolled { background: #fff; padding: 20px 0; height: 72px; transition: all 0.5s; } #header { padding: 30px 0; height: 92px; position: fixed; left: 0; top: 0; right: 0; transition: all 0.5s; z-index: 997; background-color: #fff; box-shadow: 5px 0px 15px #c3c3c3; } #header #logo h1 { font-size: 34px; margin: 0; padding: 0; line-height: 1; font-family: "Montserrat", sans-serif; font-weight: 700; letter-spacing: 3px; } #header #logo h1 a, #header #logo h1 a:hover { color: #000; padding-left: 10px; border-left: 4px solid grey; } #nav-menu-container { float: right; margin: 0; } .nav-menu > li { margin-left: 10px; } .nav-menu > li { float: left; } .nav-menu li { position: relative; white-space: nowrap; } .nav-menu, .nav-menu * { margin: 0; padding: 0; list-style: none; } .header-scrolled .nav-menu li:hover > a, .header-scrolled .nav-menu > .menu-active > a { color: #18d26e; } .header-scrolled .nav-menu a { color: black; } .nav-menu li:hover > a, .nav-menu > .menu-active > a { color: #18d26e; } .nav-menu a { padding: 0 8px 10px 8px; text-decoration: none; display: inline-block; color: #000; font-family: "Montserrat", sans-serif; font-weight: 700; font-size: 13px; text-transform: uppercase; outline: none; } #mobile-nav-toggle { display: inline; } #mobile-nav-toggle { position: fixed; right: 0; top: 0; z-index: 999; margin: 20px 20px 0 0; border: 0; background: none; font-size: 24px; display: none; transition: all 0.4s; outline: none; cursor: pointer; } #mobile-body-overly { width: 100%; height: 100%; z-index: 997; top: 0; left: 0; position: fixed; background: rgba(0, 0, 0, 0.7); display: none; } body.mobile-nav-active #mobile-nav { left: 0; } #mobile-nav { position: fixed; top: 0; padding-top: 18px; bottom: 0; z-index: 998; background: rgba(0, 0, 0, 0.8); left: -260px; width: 260px; overflow-y: auto; transition: 0.4s; } #mobile-nav ul { padding: 0; margin: 0; list-style: none; } #mobile-nav ul li { position: relative; } #mobile-nav ul li a { color: #fff; font-size: 13px; text-transform: uppercase; overflow: hidden; padding: 10px 22px 10px 15px; position: relative; text-decoration: none; width: 100%; display: block; outline: none; font-weight: 700; font-family: "Montserrat", sans-serif; } #mobile-nav ul .menu-has-children i.fa-chevron-up { color: #18d26e; } #mobile-nav ul .menu-has-children i { position: absolute; right: 0; z-index: 99; padding: 15px; cursor: pointer; color: #fff; } #mobile-nav ul .menu-item-active { color: #18d26e; } #mobile-nav ul li li { padding-left: 30px; } .menu-has-children ul {display: none;} .sf-arrows .sf-with-ul { padding-right: 30px; } .sf-arrows .sf-with-ul:after { content: "\f107"; position: absolute; right: 15px; font-family: FontAwesome; font-style: normal; font-weight: normal; color:black; } .sf-arrows ul .sf-with-ul:after { content: "\f105"; } .nav-menu li:hover > ul, .nav-menu li.sfHover > ul { display: block; } .nav-menu ul { margin: 4px 0 0 0; padding: 10px; box-shadow: 0px 0px 30px rgba(127, 137, 161, 0.25); background: #fff; } .nav-menu ul { position: absolute; display: none; top: 100%; left: 0; z-index: 99; } .sf-arrows .sf-with-ul { padding-right: 30px; } .nav-menu li { position: relative; white-space: nowrap; } @media (max-width: 768px){ #nav-menu-container { display: none; } #mobile-nav-toggle { display: inline; } }
// Mobile Navigation if ($('#nav-menu-container').length) { var $mobile_nav = $('#nav-menu-container').clone().prop({ id: 'mobile-nav' }); $mobile_nav.find('> ul').attr({ 'class': '', 'id': '' }); $('body').append($mobile_nav); $('body').prepend('<button type="button" id="mobile-nav-toggle"><i class="fa fa-bars"></i></button>'); $('body').append('<div id="mobile-body-overly"></div>'); $('#mobile-nav').find('.menu-has-children').prepend('<i class="fa fa-chevron-down"></i>'); $(document).on('click', '.menu-has-children i', function(e) { $(this).next().toggleClass('menu-item-active'); $(this).nextAll('ul').eq(0).slideToggle(); $(this).toggleClass("fa-chevron-up fa-chevron-down"); }); $(document).on('click', '#mobile-nav-toggle', function(e) { $('body').toggleClass('mobile-nav-active'); $('#mobile-nav-toggle i').toggleClass('fa-times fa-bars'); $('#mobile-body-overly').toggle(); }); $(document).click(function(e) { var container = $("#mobile-nav, #mobile-nav-toggle"); if (!container.is(e.target) && container.has(e.target).length === 0) { if ($('body').hasClass('mobile-nav-active')) { $('body').removeClass('mobile-nav-active'); $('#mobile-nav-toggle i').toggleClass('fa-times fa-bars'); $('#mobile-body-overly').fadeOut(); } } }); } else if ($("#mobile-nav, #mobile-nav-toggle").length) { $("#mobile-nav, #mobile-nav-toggle").hide(); } // Smooth scroll for the menu and links with .scrollto classes $('.nav-menu a, #mobile-nav a, .scrollto').on('click', function() { if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) { var target = $(this.hash); if (target.length) { var top_space = 0; if ($('#header').length) { top_space = $('#header').outerHeight(); if( ! $('#header').hasClass('header-fixed') ) { top_space = top_space - 20; } } $('html, body').animate({ scrollTop: target.offset().top - top_space }, 1500, 'easeInOutExpo'); if ($(this).parents('.nav-menu').length) { $('.nav-menu .menu-active').removeClass('menu-active'); $(this).closest('li').addClass('menu-active'); } if ($('body').hasClass('mobile-nav-active')) { $('body').removeClass('mobile-nav-active'); $('#mobile-nav-toggle i').toggleClass('fa-times fa-bars'); $('#mobile-body-overly').fadeOut(); } return false; } } });

Related: See More


Questions / Comments: