Hacer este menu responsive

[alexkurban]

Iniciado por AngelKrak

no entendí muy bien amigo, que es en lo que necesitas ayuda exactamente? y si puedes sube el codigo a Codepen para poder verlo mejor ;)

hola, estoy tratando de hacer este menu para cuando el dispositivo que habra la web sea un movil, asi tendria que quedar el menu:

http://prntscr.com/7uzb7r

Me he estado informando acerca de las media queries y el diseño responsivo y he logrado hacer algun progreso, asi me ha quedado de momento, pero no se como hacer que ese filtro de abajo si le pincho, me muestre el menu. asi es como me esta quedando de momento;

http://prntscr.com/7uzdj6


este es el codigo que he escrito en el header:

Código HTML:

<header>

        <div class="menuMob">
            <a href="#" ><i class="fa fa-bars fa-lg" id="menuMob"></i><img src="img/logo.png" alt="" id="logoMob"><i class="fa fa-search fa-lg" id="searchMob"></i><img src="img/cart_white.png" id="carritoMob" alt=""> </a>
        </div><!-- mobile menu bar-->

        <div class="navMob">
            <a href="#"><img src="img/filter_dark.png" id="filterMob" alt=""></a>
        </div>

        <div class="container12" id="menu">
            <div class="row">
                <div class="column2" id="logo"><img src="img/logo.png" alt=""></div><!-- Logo-->
                <div class="column2" id="tlf"><p>8 800 77 66 44</p></div><!-- tlf-->
                <div class="column5"><input type="search" placeholder="Busca tu Archivo" id="Buscador" /></div><!-- buscar-->
                <div class="column3" id="pago"><p>ОПЛАТА И ДОСТАВКА</p></div><!-- pago-->
            </div><!-- row-->

            <div class="row" style="margin-bottom: 0;" class="nav">
                <div class="column10" id="nav">
                    <nav>
                        <ul>
                            <li><a href="#smartphone">МОБИЛЬНЫЕ ТЕЛЕФОНЫ</a></li>
                            <li><a href="#tablet">ПЛАНШЕТЫ</a></li>
                            <li class="active"><a href="#photo">ФОТОТЕХНИКА</a></li>
                            <li><a href="#notebooks">НОУТБУКИ</a></li>
                            <li><a href="#tv">ТЕЛЕВИЗОРЫ</a></li>
                        </ul>
                    </nav>
                </div>
                <div class="column2"><a href="#" id="pagar"><img src="img/cart_white.png" id="carritoBlanco" alt="">PAGAR</a></div>
            </div>    
        </div><!-- container-->
        <!-- END MENU NAVIGATION-->
        
        <!-- DROP DOWN MENU -->
            <div class="container16">
                <div class="row" id="tipos">
                    <ul class="menu">
                        <li><a href="#">ЛЮБОГО ТИПА<img src="img/drop_dark.png" id="tipo" alt=""></a>
                            <ul>
                                <li><a href="#compacta">КОМПАКТ-КАМЕРА</a></li>
                                <li><a href="#sinEspejo">БЕЗЗЕРКАЛЬНАЯ</a></li>
                                <li><a href="#espejo">ЗЕРКАЛЬНАЯ</a></li>
                                <li><a href="#medioFormato">СРЕДНЕФОРМАТНАЯ</a></li>
                            </ul>
                        </li>
                    </ul>
                    <ul class="menu">
                        <li><a href="#marca">ЛЮБОГО БРЕНДА<img src="img/drop_dark.png" alt=""></a>
                            <ul>
                                <li><a href="#canon">CANON</a></li>
                                <li><a href="#nikon">NIKON</a></li>
                                <li><a href="#sony">SONY</a></li>
                                <li><a href="#fujifilm">FUJIFILM</a></li>
                                <li><a href="#samsung">SAMSUNG</a></li>
                                <li><a href="#olympus">OLYMPUS</a></li>
                                <li><a href="#panasonic">PANASONIC</a></li>
                                <li><a href="#polaroid">POLAROID</a></li>
                            </ul>
                        </li>
                    </ul>
                    <div class="column2" id="precios" style="text-align: right"><p id="description">ПО ЦЕНЕ</p></div>
                    <div class="column6">
                        <form> 
                            <input type="text" name="min" placeholder="ОТ">
                            <input type="text" name="max" placeholder="ДО">
                        </form>
                    </div>
                    <div class="column2" id="precios" style="text-align: left"><p id="description">РУБЛЕЙ</p></div>
                </div>
            </div>
    </header>
        <!-- END DROPDOWN MENU--> 

y aqui tengo el css en el mediaquery:

Código HTML:

@media only screen and (max-width: 400px) {
    body{
        padding-top: 100px;
    }

    #menu{
        display: none;
    }

    #tipos{
        display: none;
    }

    .menuMob{
        display: block;
        width: 100%;
        top: 0;
        padding: 10px;
        position: fixed;
        background: #48F;
        z-index: 1000;
    }

    #menuMob{
        margin-left: 10px;
        color: white;
    }

    #logoMob{
        margin-left: 30px;
        margin-right: 30px;
    }

    #searchMob{
        margin-right: 20px;
        color: white;
    }

    #carritoMob{
        float: right;
        margin-right: 30px;
    }
    
    .navMob{
        display: block;
        width: 100%;
        top: 45px;
        padding: 15px;
        position: fixed;
        z-index: 1005; 
        background: white;
    }

    #filterMob{
        float: right;
        margin-right: 35px;
    }

    #xe22{
        padding-bottom: 200px;
        border-top: 1px solid rgba(153, 153, 153, .2);
    }

    #carritoRed{
    float: right;
    }

    #xe22:hover{
        padding-bottom: 200px;
    }

estoy mirando los tutoriales que me habeis aconsejado