Static Nav slideToggle

by panchroma

HTML

<div class="dropdownwrap">dropdown div here</div>
<header id="mpthis" class="banner navbar navbar-fixed-top" role="banner">
    <div class="navbar-inner">
        <div class="container">
            <div id="toplogo"> <a id="dropdown" href="#" title="Click This Button">X</a>

            </div>
            <nav class="nav-main nav-collapse collapse" role="navigation">
                <ul id="menu-primary-navigation" class="nav">
                    <li><a href="#">Link 1</a>

                    </li>
                    <li><a href="#">Link 2</a>

                    </li>
                    <li><a href="#">Link 3</a>

                    </li>
                    <li><a href="#">Link 4</a>

                    </li>
                    <li><a href="#">Link 5</a>

                    </li>
                    <li><a href="#">Link 6</a>

                    </li>
                    <li><a href="#">Link 7</a>

                    </li>
                </ul>
            </nav>
        </div>
    </div>
</header>
<div id="content">
    <p>Croissant chocolate muffin. Powder fruitcake fruitcake cupcake fruitcake sesame snaps. Fruitcake macaroon sesame snaps candy cake bear claw tart tiramisu. Sugar plum wafer pie ice cream marshmallow bear claw powder. Sesame snaps cotton candy jelly beans ice cream. Muffin gummies jelly beans croissant tootsie roll cake marshmallow dragée. Jelly-o cookie toffee oat cake. Chupa chups dessert fruitcake gummies fruitcake muffin gummi bears ice cream. Bonbon pudding cake soufflé macaroon sweet roll. Oat cake jelly-o pastry. Sweet roll cotton candy chupa chups cheesecake. Unerdwear.com chocolate candy canes gummi bears tootsie roll apple pie toffee pastry.</p>
    <p>Croissant chocolate muffin. Powder fruitcake fruitcake cupcake fruitcake sesame snaps. Fruitcake macaroon sesame snaps candy cake bear claw tart tiramisu. Sugar plum wafer pie ice cream marshmallow bear claw powder. Sesame snaps cotton candy jelly beans ice cream. Muffin...

CSS

.dropdownwrap {
    background-color:#ef0403;
    display:none;
    height: 150px;
    width: 100%;
    z-index: 1000;
    top: 0;
    position: fixed;
   
}

.dropdown-top-paddding{
 top:150px;
}

.navbar {
    width: 100%;
    height: 44px;
    background: #eee;
    display: block;
}
#toplogo {
    float: left;
}
.navbar .nav>li {
    float: left;
    list-style: none;
    padding: 0px 14px;
}
.navbar-fixed-top {
    position: fixed;
    right: 0;
    left: 0;
    z-index: 1030;
    margin-bottom: 0;
}
.navbar-fixed-mp {
    right: 0;
    left: 0;
    z-index: 1030;
    position: fixed;
}
#content {
    padding-top: 34px
}

JavaScript

jQuery(document).ready(function () {
    jQuery(".dropdownwrap").hide();
    jQuery('#dropdown').click(function () {

        if (!jQuery(".dropdownwrap").is(":visible")) jQuery('#mpthis').removeClass("navbar-fixed-top").addClass("navbar-fixed-mp dropdown-top-paddding");
        jQuery('.wrap').addClass("fixthis");


        jQuery(".dropdownwrap").slideToggle(function () {
            if (!jQuery(".dropdownwrap").is(":visible")) jQuery('#mpthis').addClass("navbar-fixed-top ").removeClass("navbar-fixed-mp dropdown-top-paddding");
            jQuery('.wrap').removeClass("fixthis");



        });
    });
});