Changer le menu mobile sur vingt douze pour WordPress ?

J’utilise le thème vingt-douze pour wordpress http://wordpress.org/extend/themes/twentytwelve et j’ai changé le menu pour qu’il soit beau pour le bureau. Dans la version mobile, le bouton du menu s’affiche mais lorsque vous cliquez dessus, mon menu habituel s’affiche. Je voudrais styliser le menu mobile sans que mon menu normal ne soit affecté mais je ne trouve pas où le faire. Mon site n’est pas en ligne, je ne peux donc pas donner de lien vers mon site

vingt douze démo http://twentytwelvedemo.wordpress.com/

Ceci est mon menu destop qui semble correct.

C’est le menu mobile que je veux styliser sans affecter le menu du bureau

J’ai changé le css suivant pour styliser mon menu de bureau

.main-navigation ul.nav-menu,
    .main-navigation div.nav-menu > ul {
        border-bottom: 2px solid #f68a1f;
        border-top: none;
                margin: 0 0 2px 0;
                padding: 0px;
                padding-top: 50px;
        width: 550px;
    }
    .main-navigation ul {
        float: right;
                margin: 0;
                padding: 0;
                list-style: none;
    }
    .main-navigation li a,
    .main-navigation li {
        list-style: none;
                float: left;
                width: 90px;
                margin:0px;
    }
    .main-navigation li a {
        color: #292A2B;
            display: block;
            padding: 5px 5px;
            text-align:center;
            text-decoration: none;
            font-weight: normal;
            font-size: 14px;
            line-height: 30px;

            border-radius: 10px 10px 0px 0px;
            -moz-border-radius: 10px 10px 0px 0px;
            -webkit-border-bottom-right-radius: 0px;
            -webkit-border-bottom-left-radius: 0px;
    }
    .main-navigation li a:hover {
        color: #ffffff;
    background-color: #f68a1f;

    border-radius: 10px 10px 0px 0px;
    -moz-border-radius: 10px 10px 0px 0px;
    -webkit-border-bottom-right-radius: 0px;
    -webkit-border-bottom-left-radius: 0px;
    }
    .main-navigation li {
        margin: 0 40px 0 0;
        margin: 0 1rem 0 0;
        position: relative;
    }
    .main-navigation li ul {
        display: none;
        margin: 0;
        padding: 0;
        position: absolute;
        top: 100%;
        z-index: 1;
    }
    .main-navigation li ul ul {
        top: 0;
        left: 100%;
    }
    .main-navigation ul li:hover > ul {
        color: #ffffff;
    background-color: #f68a1f;

    border-radius: 10px 10px 0px 0px;
    -moz-border-radius: 10px 10px 0px 0px;
    -webkit-border-bottom-right-radius: 0px;
    -webkit-border-bottom-left-radius: 0px;
    }
    .main-navigation li ul li a {
        color: #292A2B;
                display: block;
            padding: 5px 5px;
            text-align:center;
            text-decoration: none;
            font-weight: normal;
            font-size: 14px;
            line-height: 30px;

    border-radius: 10px 10px 0px 0px;
    -moz-border-radius: 10px 10px 0px 0px;
    -webkit-border-bottom-right-radius: 0px;
    -webkit-border-bottom-left-radius: 0px;
    }
    .main-navigation li ul li a:hover {
        color: #ffffff;
                background-color: #f68a1f;

    border-radius: 10px 10px 0px 0px;
    -moz-border-radius: 10px 10px 0px 0px;
    -webkit-border-bottom-right-radius: 0px;
    -webkit-border-bottom-left-radius: 0px;
    }

    .main-navigation .current-menu-item > a,
    .main-navigation .current-menu-ancestor > a,
    .main-navigation .current_page_item > a,
    .main-navigation .current_page_ancestor > a {
        color: #ffffff;
                background-color: #f68a1f;
    }

L’intégralité du fichier CSS du thème http://pastebin.com/SFaT4BCn

Solution n°1 trouvée

Trouvé /* = Requêtes média /* Largeur minimale de 600 pixels. */ en CSS et le thème use mobile first. Je viens de déplacer mon code dans cette section.

Solution n°2 trouvée

Utilisez-vous des media queries ? Essayez d’utiliser des requêtes multimédias pour définir des styles pour des résolutions d’appareils spécifiques.