"Fixed Header + Navbar + Animation Effects v.2"
Bootstrap 3.3.0 Snippet by eXP Design

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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 ----------> <head> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/aos/2.1.1/aos.css"> <!-- thats important for animation effects --> <link href="https://fonts.googleapis.com/css?family=Arbutus" rel="stylesheet"> <!-- Demo --> </head> <body> <header> <nav class="navbar navbar-default navbar-fixed-top" data-aos="fade-down" data-aos-duration="2600" data-aos-once="true" > <div class="container-fluid"> <div class="navbar-header"><a class="navbar-brand navbar-link" href="#">Dize Design AOS-Header v.2</a> <button class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navcol-1"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button> </div> <div class="collapse navbar-collapse" id="navcol-1"> <ul class="nav navbar-nav navbar-right"> <li role="presentation"><a href="#">Home </a></li> <li role="presentation"><a href="#">Project </a></li> <li role="presentation"><a href="#">About Us</a></li> <li role="presentation"><a href="#">Contact </a></li> </ul> </div> </div> </nav> <div class="container"> <div class="row"> <div class="col-md-12" data-aos="fade-left" data-aos-duration="2600" data-aos-once="true" > <h1>Lorem Ipsum</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p> </div> <div class="col-md-12" data-aos="fade-right" data-aos-duration="2600" data-aos-once="true" ><center> <a class="btn btn-link" target="blank" href="https://www.instagram.com/exp__designer/"> Lorem Ipsum </a> </center> </div> </div> </div> </header> <script src="https://cdnjs.cloudflare.com/ajax/libs/aos/2.1.1/aos.js"></script> <!-- Important for animation -->
/* Demo */ body { font-family: 'sans-serif'; } /* Header settings */ header { height:100vh; /* you can change that height to 100%, please get sure youre Header is ready */ background-attachment:fixed; background-size:cover; background-position:left; background-repeat:no-repeat; background-image:linear-gradient(to right, black 0%, white 100%), url('https://static.pexels.com/photos/225600/pexels-photo-225600.jpeg'); background-blend-mode:screen; /* you can remove that, if you do that delet the "linear-gradient(to right, black 0%, white 100%)," */ } @media (max-width:767px){ header { background-attachment:inherit; } } header .row { margin-top:40vh; /* Handle the row */ } @media (max-width:767px){ header .row { margin-top:30vh; /* Handle the row on mobile */ } } header h1 { font-family: 'Arbutus', cursive; text-align:center; font-size:61px; color:#F8CA4D; text-shadow:0px 0px 4px #222; } @media (max-width:767px){ header h1 { font-size:41px; } } header p { text-align:center; font-size:21px; } header .btn-link { border:1px solid #2F3440; margin-top:20px; font-size:21px; letter-spacing:1px; color:#2F3440; text-shadow:0px 0px 1px #222; box-shadow:0px 0px 1px #000; } header .btn-link:hover { text-decoration:none; color:#eee; border:1px solid #eee; transition:all 0.7s; text-shadow:0px 0px 3px #000; } /* Custom navbar settings */ .navbar-default { background-color:#3F5666; border-color:#2F3440; border-bottom:1px solid #00c9c0; border-radius:0px; } .navbar-default .navbar-nav > li > a { color:#fff; letter-spacing:1px; font-weight:500; } .navbar-default .navbar-brand { color:#ffffff; letter-spacing:1px; } .navbar-default .navbar-brand:hover { color:#eee; transition:all 0.7s; } .navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus { color:#eee; background-color:#2F3440; transition:all 0.7s; font-size:21px; } .navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus { color:#eee; background-color:#2F3440; transition:all 0.7s; font-size:15px; }
$(document).ready(function(){ AOS.init({ disable: 'mobile' }); }); /* For mobile support, delet the 'mobile' */

Related: See More

Argon Design System
Ripple Dot Animation
Success and Error Icon Animation
Bootstrap4 navigation border animation

Questions / Comments: