How to put a banner above the fixed navbar of bootstrap which disappears when scrolling down?


Tags: css,asp.net-mvc,twitter-bootstrap

Problem :

I"m currently working on a project for school to make a ASP.NET MVC website. When i created a new project, bootstrap files were automatically added. So i decided to work with it, but i never did so before.

The first thing i noticed was the fixed navbar at the top of the website. I want a header/banner above it, followed by the navbar. But i didn't manage to do it. I have this code below in the layout view:

<div class="movdb-header"></div> <!-- this is the header i want to display above navbar -->

<div class="navbar navbar-inverse navbar-fixed-top"> 
<div class="container">
    <div class="navbar-header">
        <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>
        @Html.ActionLink("Home", "Index", "Home", new {area = ""}, new {@class = "navbar-brand"})
        @Html.ActionLink("Inloggen", "Index", "User", new {area = ""}, new {@class = "navbar-brand"})
        @Html.ActionLink("Uitloggen", "Index", "Logout", new {area = ""}, new {@class = "navbar-brand"})
    </div>
    <div class="navbar-collapse collapse">
        <ul class="nav navbar-nav">
        </ul>
    </div>
</div>

CSS:

.movdb-header {
background-color: red;
height: 110px;
width: 100%;

}

Layout

I searched earlier about this problem and people talked about removing the navbar-fixed-top class and then putting your div above it. But i want the navbar to stay fixed but below the personal banner and if scrolled down only the navbar is visible on top. So the banner disappears when scrolling down.

How can i solve this problem?

Thanks in advance.



Solution :

You can give your .movdb-header fixed position and give top: 110px position to your navbar. It is set on top: 0 now.

EDIT:

.navbar {
 position: relative;
 }

$(document).ready(function(){
    $(window).scroll(function(){
        if ($(window).scrollTop() > 100){
            $('.navbar').css('position','fixed');
        }
        else{
            $('.navbar').css('position','relative');
        }
    });
});

    CSS Howto..

    CSS: How to move contents of one div into another one

    How to select non-header cells with css

    How do you put