JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<!-- Change topmenu to button -->
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- Logo -->
<a class="navbar-brand" href="#">LOGO</a>
</div>
<div class="navbar-collapse collapse">
<div class="container">
</div>
<ul class="nav navbar-nav navbar-right">
<li><a href="#forside">Forside</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Musik <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#genre1">Genre1</a></li>
<li><a href="#genre2">Genre2</a></li>
<li><a href="#genre3">Genre3</a></li>
</ul>
</li>
<li><a href="#omos">Om os</a></li>
<li><a href="#blog">Blog</a></li>
<li class="active"><a href="#kontakt">Kontakt</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<!-- Navigation -->
<!-- Indledning
================================================== -->
<div class="introbox">
<div class="container" id="intro">
<h1>Skal...
CSS
.navbar {
background: #f00;
}
.introbox {
background: #0f0;
}
footer {
background: #00f;
}
JavaScript
$(document).ready(function () {
$(window).load(function () {
var oldSSB = $.fn.modal.Constructor.prototype.setScrollbar;
$.fn.modal.Constructor.prototype.setScrollbar = function () {
oldSSB.apply(this);
if (this.bodyIsOverflowing && this.scrollbarWidth) {
$('.navbar-fixed-top, .navbar-fixed-bottom').css('padding-right', this.scrollbarWidth);
}
}
var oldRSB = $.fn.modal.Constructor.prototype.resetScrollbar;
$.fn.modal.Constructor.prototype.resetScrollbar = function () {
oldRSB.apply(this);
$('.navbar-fixed-top, .navbar-fixed-bottom').css('padding-right', '');
}
});
});