"Jquery resize navbar header - Nothing good..."
Bootstrap 3.3.0 Snippet by aubm1

<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 ----------> <header> <div class="container-fluid"> <div class="row zsx"> <div class="col-lg-12 animated lightSpeedIn"> <p class="vcenter"> <h1><i class="fa fa-bomb fa-lg"></i> TheBombWebsite</h1> <h3>Everything explosion related</h3> </p> </div> </div> </div> </header> <nav class="navbar navbar-default navbar-static-top"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#zsxnavcollapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <!-- <a class="navbar-brand" href="#top">TheBombHome</a> --> </div> <div class="collapse navbar-collapse pull-right" id="zsxnavcollapse"> <ul class="nav navbar-nav"> <li><a href="#">POW</a></li> <li><a href="#">BOOM</a></li> <li><a href="#">BANG</a></li> <li><a href="mailto:mathieu@zeroserieux.com">CONTACT THE BOMB!</a></li> </ul> </div> </div> </nav> <div class="container"> <div class="row"> <div class="col-xs-12"> <h2 class="text-center">this snippet has nothing of value! (resize, maybe you'll like it...)</h2> <div class="row"> <div class="col-xs-12"> <h4>JS to Fix:</h4> <ul>- Adjust the numbers in reSize function to suit the resize ratio you need</ul> <ul>- The javascript resize is very customizable.. Let your brain do some magic maybe</ul> </div> </div> </div> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
/* * Custom stylesheet for http://----.ca * Initial version on 2016.02.22 intended for the website's temporary page. * Modified on 2016.02.27 to share on bootsnipp.com * * Created by Mathieu Aubin (mathieu@zeroserieux.com) * * Contribute to have your name here, no matter how small of a change. * * Licenced under the WTFPL Version 2 (http://www.wtfpl.net/) * * This program is free software. It comes without any warranty, to * the extent permitted by applicable law. You can redistribute it * and/or modify it under the terms of the Do What The Fuck You Want * To Public License, Version 2, as published by Sam Hocevar. See * http://www.wtfpl.net/ for more details. * */ /* Font-Awesome v4.5.0 - (http://fortawesome.github.io/Font-Awesome/) */ @import url("https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css") all; /* Google-Fonts */ @import url("https://fonts.googleapis.com/css?family=Buenard:700") all; body { #padding-top: 250px; } .zsx { background-color: rgba(128, 0, 5, 0.85); } .zsx h1, .zsx h3{ text-align:center; color:#fff; } .zsx h1{ font-size:110px; font-family:'Buenard', serif; font-weight:bold; text-transform:inherit; margin: 0px auto 0px; text-shadow: 2px 2px 2px #000; -webkit-text-shadow: 2px 2px 2px #000; -moz-text-shadow: 2px 2px 2px #000; } .zsx h3{ font-size: 25px; font-weight:lighter; margin: 0px auto 15px; }
/* * Custom javascript for http://----.ca * Initial version on 2016.02.22 intended for the website's temporary page. * Modified on 2016.02.27 to share on bootsnipp.com * * Created by Mathieu Aubin (mathieu@zeroserieux.com) * * Contribute to have your name here, no matter how small of a change. * * Licenced under the WTFPL Version 2 (http://www.wtfpl.net/) * * This program is free software. It comes without any warranty, to * the extent permitted by applicable law. You can redistribute it * and/or modify it under the terms of the Do What The Fuck You Want * To Public License, Version 2, as published by Sam Hocevar. See * http://www.wtfpl.net/ for more details. * */ /* Change the numbers to adjust your resize ratio */ function reSize() { var n = $("body").width() / 15; $("h1").css('fontSize', n + "pt"); $("h3").css('fontSize', (n/20) * 4.2 + "pt"); } $(window).on("resize", reSize); $(document).ready(reSize); (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','//www.google-analytics.com/analytics.js','ga'); ga('create', 'UA-70761127-6', 'auto'); ga('send', 'pageview');

Related: See More


Questions / Comments: