"Header full responsive + fixed navbar + animation effects | Shine v.1"
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="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html> <html> <head><!-- Fonts and Animation --> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Anton"> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Bangers"> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/aos/2.1.1/aos.css"> </head> <body> <header> <nav class="navbar navbar-default navbar-fixed-top"> <div class="container-fluid"> <div class="navbar-header"><a class="navbar-brand navbar-link" href="https://www.instagram.com/exp__designer/" target="blank"><i class="material-icons">cast</i></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 target="blank" href="https://www.instagram.com/exp__designer/">start now</a></li> <li role="presentation"><a href="#">how to use</a></li> <li role="presentation"><a href="#">online streamers</a></li> <li role="presentation"><a href="#">sign in</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"> <h1 data-aos="fade-right" data-aos-duration="1800" data-aos-once="true">Shine </h1> <p data-aos="fade-left" data-aos-duration="1800" data-aos-once="true">your creative streaming platform </p> </div> </div> </div> </header> <script src="/bs-animation.js"></script> <!-- place youre js file here --> <script src="https://cdnjs.cloudflare.com/ajax/libs/aos/2.1.1/aos.js"></script> </body> </html>
header { height:100vh; background-image:url('https://img1.picload.org/image/ddolpcwa/woman-2486528_1920.jpg'); background-size:cover; background-position:center center; background-repeat:no-repeat; } @media (max-width:767px) { header { height:100%; } } .navbar.navbar-default.navbar-fixed-top { background:transparent; } .navbar-default .navbar-nav > li > a { color:#fff; text-transform:uppercase; } .navbar-default .navbar-nav > li > a:hover { color:#fff; } .navbar-brand.navbar-link { color:#fff; } header .row { margin-top:30vh; } header h1 { text-align:center; color:#fff; font-family:'Bangers'; font-size:81px; text-shadow:1px 1px 1px #000; } header p { text-align:center; color:#fff; font-size:32px; text-shadow:1px 1px 1px #000; }
$(document).ready(function(){ AOS.init({ disable: 'mobile' }); }); /* for mobile support delet the 'mobile' */

Related: See More

Vuetify Material Dashboard
Ripple Dot Animation
Success and Error Icon Animation
Bootstrap4 navigation border animation

Questions / Comments:

For those, who wants to re-use it. If you want to change the color of the navbar, since it will appear with default colors (gray and hover to black), use that updated CSS functions:

.navbar-default .navbar-nav > li > a {

color:#fff !important;

text-transform:uppercase;

}

.navbar-default .navbar-nav > li > a:hover {

color: #11ff75 !important;

}

.navbar-brand.navbar-link {

color:#11ff75 !important;

}

Lane Boy (1) - 6 years ago - Reply 1