Le Responsive design, mise en page CSS menu position chevauche en-tête logo

Je le veux ainsi, lorsque la fenêtre est 800px large ou en dessous se cache le menu <div> et montre la icône de menu ☰ et en cliquant sur l'icône, je veux que le menu apparaisse dans une mise en page soignée, de sorte qu'un iPhone peut afficher à 320px,

C'est mon HTML.

<div id="header">
    <div class="wrap">
        <div id="logo">
            <p>LOGO HERE</p>
        </div><!--logo-->
        <div id="menu_wrapper">
            <ul id="nav">
                <div id="homeBtn"><a href="index.php"><span id="homeBtnImg"></span></a></div>
                <li><a href="#">WORK</a></li>
                <li><a href="#">SERVICES</a></li>
                <li><a href="#">ABOUT</a></li>
                <li id="end"><a href="#">CONTACT</a></li>
            </ul>
        </div>
    </div><!--wrap-->
</div><!--header-->

Le Responsive design, mise en page CSS menu position chevauche en-tête logo

Aussi comme un démo violon

Vous gardez breakign la chose comment? Comment est-il censé ressembler? Vous devez nous donner un exemple à cause d'une "mise en page soignée" peut être n'importe quoi..
Mise à jour de ma réponse basé sur la conception de l'image.
Édité question, merci de revenir si ce n'est pas correct

OriginalL'auteur Stephen Jackson | 2013-10-29