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

Post to Facebook Tweet this

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<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>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
/*
* 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;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
/*
* 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');
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Rubik Presentation Page
Bootstrap NavBar Menu Dropdowns http://fontenele.github.io/bootstrap-navbar-dropdowns/
Bootstrap 4 Navbar with Icon Top
Transparent Sticky NavBar

Questions / Comments: