Bootstrap fixed navbar with shrink logo, above navbar - html

Question

How can I use a fixed navbar with parent logo with bootstrap.
The logo then decreases when you scroll, but remains visible with the fixed navbar.
For example for the shrinking logo and navbar: https://doemee.zoetermeer.nl

Answer 1

You can achieve this by using bootstrap class navbar-fixed-top on the nav and adding little jQuery to trigger window scroll event. When you scroll down or scroll up, just toggle a CSS class.
Demo: See here
$(document).ready(function () {
$(window).scroll(function () {
//Method 1: Using addClass and removeClass
//if ($(document).scrollTop() > 50) {
// $('.navbar-default').addClass('navbar-shrink');
//} else {
// $('.navbar-default').removeClass('navbar-shrink');
//}
//Method 2: Using toggleClass
$(".navbar-default").toggleClass("navbar-shrink", $(this).scrollTop() > 50)
});
});
#media screen and (min-width: 992px) {
.navbar-default {
padding: 30px 0;
transition: padding 0.3s;
}
.navbar-default.navbar-shrink {
padding: 10px 0;
}
}
.navbar-default a {
color: #4D4D4D;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
text-transform: uppercase;
text-decoration: none;
line-height: 42px;
font-weight: 700;
font-size: 20px;
}
.navbar-default a.brand > img {
max-width: 70px;
}
.navbar-default a.active {
color: #2dbccb;
}
.content {
position: absolute;
width: 100%;
height: 100%;
}
.content > section {
width: 100%;
height: 100%;
}
#portfolio {
background: #2dbccb;
}
#about {
background-color: #eb7e7f;
}
#contact {
background-color: #415c71;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Navigation -->
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#top-nav">
<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="brand" href="http://trungk18.github.io/"><img src="trungk18.png" class="img-responsive" title="trungk18" /></a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="top-nav">
<ul class="nav navbar-nav navbar-right">
<li class="page-scroll">
Portfolio
</li>
<li class="page-scroll">
About
</li>
<li class="page-scroll">
Contact
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<!-- Content Section -->
<div class="content">
<section id="portfolio"></section>
<section id="about"></section>
<section id="contact"></section>
</div>