Bootstrap fixed navbar with shrink logo, above navbar

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">
                        <a href="#portfolio">Portfolio</a>
                    </li>
                    <li class="page-scroll">
                        <a href="#about">About</a>
                    </li>
                    <li class="page-scroll">
                        <a href="#contact">Contact</a>
                    </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>