Question

I am using the theme twenty twelve for wordpress http://wordpress.org/extend/themes/twentytwelve and have changed the menu so that it looks good for the desktop. In the mobile version, the button for the menu shows up but when you click it appears my regular menu. I would like to style down the mobile menu without my normal menu is affected but can not find where to do it. My site is not online, so I can not give a link to my site

twenty twelve demo http://twentytwelvedemo.wordpress.com/

This is my destop menu that looks ok.

This is the mobile menu that I want to style without affect the desktop menu

Have changed the following css to style my desktop menu

.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;
    }

The entire css file from theme http://pastebin.com/SFaT4BCn

Answer 1

Found /* =Media queries /* Minimum width of 600 pixels. */ in CSS and the theme use mobile first. Just moved my code to that section.