Conflicto entre javascript y css

[mblascog]

Buenas,
Por medio de media-query visualizo un botón. Dicho botón, al hacer clic visualiza un menú.
Todo esto pasa a los 700 píxeles, es decir, cuando el navegador mide menos de 700 píxeles, aparece el botón. Al hacer clic, aparece el menú. Si ensancho el navegador a más de 700píxeles, desaparece el botón del menú, pero no el menú.

El código es el siguiente:

Código CSS:

#menuR {
    display:none;
    clear:both; 
    width:60%;
    min-width:300px;
    margin-left:-36px;
    background:#99B59F;
}
#menuR nav ul{
    list-style:none;
}
#menuR nav ul li {
    height:30px; 
    border:1px solid #FFFCD8;
    padding-top:6px;
    padding-left:5px;
    background:url('../imatges/fletxeta.png') no-repeat;
    background-position:right center;
}
#menuR nav ul li a {
    text-decoration:none;
    color:#FFFCD8;
    font:bold 1em Helvetica, Arial;
}
 
@media screen and (min-width:700px){
    #menuR {display:none;}
}
 

Y al pulsar clic sobre el botón:

Código Javascript:

function MenuVisible() {
    if (document.getElementById("menuR").style.display == "block") 
        document.getElementById("menuR").style.display = "none";
    else 
        document.getElementById("menuR").style.display = "block"; 
}
 

Qué tengo que hacer para que al pasar de 700píxeles, desaparezca el menú?

Gracias