CODEWITHSUNDEEP
jqueryhtmltwitter-bootstrapposition
Vladimir Jovanovic
Vladimir Jovanovic

Reputation: 151

How to put content above navbar-fixed-top?

i need to put banner on top of my navigation menu that slides down with 500ms delay after the page loads and dissappears on click, something like on uber.com. I wrote jquery function for that but my main problem is how to position it because my navbar is fixed top and I cant place my banner above it, at least not without messing with the rest of content.

My code without banner looks like this :

<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 your boat</a></li>
                    <li><a href="#">Book A Boat</a></li>
                    <li><a href="#">Destination of the 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>

Upvotes: 2

Views: 7768

Answers (1)

Joel Harkes
Joel Harkes

Reputation: 11661

put a div above your header div or inside the fixed-top navbar. what you could do is just put the html of the banner inside your page and just put display:none; style on the div of your css banner. now you can use jquery.show() to make it 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 you use the position: fixed you could try changing its position by using css: top:50px in css and remove onclick on banner.

you can push down you content by using padding-top: 65px; on your content div or on your body tag. a perfect example is from bootstrap: http://getbootstrap.com/examples/navbar-fixed-top/. This is documented here: http://getbootstrap.com/components/#navbar-fixed-top

Upvotes: 2

Related Questions