"Fixed Header + Navbar + Buttons + Brand-Material-Icon | Gamer Clans v.1 | Responsive"
Bootstrap 3.3.0 Snippet by eXP Design

<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> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Fixed-Header | Gamer Clans v.1</title> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Akronim"> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> </head> <!-- Created with love for you <3 hey its free and you can delet this. | Dize Design | --> <body> <nav class="navbar navbar-default navbar-fixed-top"> <div class="container-fluid"> <div class="navbar-header"><a class="navbar-brand navbar-link" href="#"><i class="material-icons">zoom_out_map</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 href="#">Home </a></li> <li role="presentation"><a href="#">Members </a></li> <li role="presentation"><a href="#">Games </a></li> <li role="presentation"><a href="#">Clan Wars</a></li> <li role="presentation"><a href="#">Forum </a></li> <li role="presentation"><a href="#">Join Us</a></li> </ul> </div> </div> </nav> <header> <div class="container"> <div class="row"> <div class="col-md-12"> <h1>For the Legion</h1> <p>[FTL] </p> </div> <div class="col-md-2 col-md-offset-4 col-xs-8 col-xs-offset-2"> <a href="https://www.instagram.com/exp__designer/" target="blank" class="btn btn-primary btn-block" type="button">Join Us</a> </div> <div class="col-lg-offset-0 col-md-2 col-md-offset-0 col-sm-offset-2 col-xs-8 col-xs-offset-2"> <a class="btn btn-danger btn-block" type="button">Battle Us</a> </div> </div> </div> </header> </body> </html>
header { height:100vh; background-image:url('https://img1.picload.org/image/ddolpidl/h.jpg'); background-size:cover; background-position:center center; background-attachment:fixed; font-family:'Akronim'; } @media (max-width:767px) { header { background-attachment:inherit; } } header .row { margin-top:30vh; } header h1 { text-align:center; color:#fff; text-shadow:1px 1px 1px #000; font-size:91px; } @media (max-width:767px) { header h1 { text-align:center; color:#fff; text-shadow:1px 1px 1px #000; font-size:61px; } } header p { text-align:center; color:#fff; text-shadow:1px 1px 1px #000; font-size:41px; letter-spacing:5px; margin-bottom:50px; } @media (max-width:767px) { header p { text-align:center; color:#fff; text-shadow:1px 1px 1px #000; font-size:27px; letter-spacing:5px; margin-bottom:50px; } } .navbar-default { background-image:none; background-image:none; background-image:none; background-image:none; filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#fff8f8f8', GradientType=0); filter:progid:DXImageTransform.Microsoft.gradient(enabled=false); border-radius:0px; -webkit-box-shadow:inset 0 1px 0 rgba(255,255,255,.15),0 1px 5px rgba(0,0,0,.075); box-shadow:inset 0 1px 0 rgba(255,255,255,.15),0 1px 5px rgba(0,0,0,.075); background:rgba(0,0,0,0.25); } .navbar-brand .material-icons { color:#fff; text-shadow:1px 1px 1px #000; } .navbar-default .navbar-nav > li > a { color:#fff; text-shadow:1px 1px 1px #000; } header .btn { font-size:21px; background:rgba(0,0,0,0.247059); letter-spacing:3px; } @media (max-width:767px) { header .btn { font-size:21px; background:rgba(0,0,0,0.247059); letter-spacing:3px; margin-bottom:14px; } }

Related: See More


Questions / Comments:

If you like it, give me a thumbs up and I'll extend the headers for you with new features. Over time, new headers come again and again!

Dize Design (1) - 6 years ago - Reply 0