jquery - How to put content above navbar-fixed-top? -

jquery - How to put content above navbar-fixed-top? -

i need set banner on top of navigation menu slides downwards 500ms delay after page loads , dissappears on click, on uber.com. wrote jquery function main problem how position because navbar fixed top , cant place banner above it, @ to the lowest degree not without messing rest of content.

my code without banner looks :

<div id="page"> <div id="header"> <div id="main-navigation" class="navbar navbar-fixed-top"> <div class="navbar-header"> <div id="logo" class="logo"> <a href="index.php"><img src="img/logo.png" alt="logo"/></a> </div> </div> <div id="menu-click"> <a href="#" class="menu-main navbar-right nav-toggler toggle-slide-right">menu <img class="three-lines" src="img/oie_transparent.png" alt="menu"/></a> </div> </div> <nav class="menu slide-menu-right marginup"> <ul> <li><button class="close-menu">close &rarr;</button></li> <li><a href="#">register boat</a></li> <li><a href="#">book boat</a></li> <li><a href="#">destination of day</a></li> <li><a href="faq.php">faq</a></li> <li><a href="support.php">support</a></li> <li><a href="#">blog</a></li> </ul> </nav> </div>

put div above header div or within fixed-top navbar. set html of banner within page , set display:none; style on div of css banner. can utilize jquery.show() create visable.

<div id="page"> <div id="header"> <div id="main-navigation" class="navbar navbar-fixed-top"> <div class="your-banner" style="display: none;"> <div class="navbar-header"> <div id="logo" class="logo">

or

<div id="page"> <div class="your-banner" style="display: none;"> <div id="header"> <div id="main-navigation" class="navbar navbar-fixed-top"> <div class="navbar-header"> <div id="logo" class="logo">

if utilize position: fixed seek changing position using css: top:50px in css , remove onclick on banner.

you can force downwards content using padding-top: 65px; on content div or on body tag. perfect illustration bootstrap: http://getbootstrap.com/examples/navbar-fixed-top/. documented here: http://getbootstrap.com/components/#navbar-fixed-top

jquery html twitter-bootstrap position