Conflicto entre javascript y css

[fede5426]

La solución más simple que a mi se me ocurre es meter el botón y el menú dentro de un contenedor, y aplicar el display none o display block con media queries a ese contenedor y no solo al botón de menú.

Algo así:

Código HTML:

<div class="menuR">
    <button class="boton">MENU</button>
    <nav class="lista-menu">
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Clients</a></li>
            <li><a href="#">Contact Us</a></li>
        </ul>
    </nav>  
</div>
 

Código CSS:

@media screen and (min-width:700px){
    .menuR{
        display:none;
    }
}
 

Agrego también el Jquery de aparición de menú clickeando el botón..

Código Javascript:

$(document).ready(function(){
    
    $(".boton").click(function(){
        
        $(".lista-menu").slideToggle();
        
    }); 
    
});
 

Y de paso dejo un codepen funcionando:

http://codepen.io/fede5426/pen/vOpLQj

Saludos