Responsive design

Slùt tout le monde,,

J'ai recontré un petit problem au niveau du desgin

le problem est :

j'ai une div parent (topbar), qui contien des div

<div class="topbar">
    <div class="top">
        <div class="logo">
            <a href="index.html"><img src="img/logo.png" alt="Logo" /></a>
        </div>
            <a href="#" class="responsive">
                <span class="bar"></span>
                <span class="bar"></span>
                <span class="bar"></span>
            </a>
        <div class="search">
            <form>
                <input type="text" placeholder="Some thins Missing ?" />
            </form>
            </div>
    </div>
    <div class="navbar">
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">Home</a></li>
            <li><a href="#">Home</a></li>
            <li><a href="#">Home</a></li>
            <li><a href="#">Home</a></li>
        </ul>
    </div>
</div>

et voila le css

.topbar{
    overflow: hidden;
    margin-bottom: 20px;
}
.topbar .top{
    overflow: hidden;
}
.topbar .top .logo{
    float: right;
    margin: 5px 15px;
}
.topbar .top .search{
    float: left;
    margin-left: 10px;
    margin-top: 10px;
}
.topbar .top .search input{}
.topbar .top .search input:hover{}
.topbar .top .search input:focus{}
.topbar .navbar{
    background: #494745;
    overflow: hidden;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.topbar .navbar ul li{
    float: right;
    list-style: none;
}
.topbar .navbar ul li a{
    padding: 11px 10px;
    display: block;
}
.topbar .responsive{
    float: left;
    margin-top: 14px;
    display: none;
}
.bar{
    display: block;
    width: 18px;
    height: 2px;
    margin: 3px 0;
    background-color: whiteSmoke;
    -webkit-border-radius: 1px;
    -moz-border-radius: 1px;
    border-radius: 1px;
    -webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
    -moz-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);    
}
.topbar .responsive{ display: block; }
.topbar .navbar { display: none; }

et enfin le jQuery

jQuery(function($){
    $('.responsive').click(function(){
        $('.navbar').slideToggle();
        return false;
    }); 
});

Voila le problème, j'ai la div navbar qui se trouve au dessus , et qui apparaît bien
mais au niveau du responsive design je veux que la div.respnsive apparaît et le navbar diaprait , et il me reste la possibilité
de voir le navbar lorsque je clic sur la div.respnsive (j'ai fais ça avaec la jquery comme le code ) mais lorsque je suis sur le responsive et lorque je cache mon navbar et j'agrandi l'ecran a nouveau le navbar n'apparaitre plus ,
et lorsque j'inpect le code je trouve la displa:none; au niveau du html

Merci bcp :)