Ayuda necesaria con menú responsive en Bootstrap

leit0s · 11 Oct 2014

Hola betas buenas noches me dan una ayuda, sucede que intente reproducir mi menú en booststrap pero no pude, pues esa parte del logo que esta predeterminada ni idea como manejarlo para que se parezca a mi menú, por ende sigo dándole vuelta al código que tengo, porque no funciona en las tablet y movil es acaso que allí no reconoce el input que se usa para desplegar el menú, me dan su orientación, el código si funciona en pc y en los testeadores, pero en el dispositivo real no.

Aquí como es mi menú, pero no funciona en la tablet y moviles.

Acá el código que uso.

HTML:

<style>
/* Navigation ----------------------------------------------- */
#menuatas {
    color:#474747;
    background:#F1F1F1;
    padding:3px 0;
    border-bottom:1px solid #CCC
}
#menuatas a:hover {
    text-decoration:none
}
#ktuskrg {
    display:inline-block;
    height:18px;
    float:left;
    line-height:18px;
    padding:0 10px;
    border-right:1px solid #ACACAC
}
#navtop {
    display:inline-block;
    margin-left:5px
}
#navtop ul, #navtop li {
    padding:0;
    margin:0;
    list-style:none
}
#navtop li {
    float:left;
    height:18px;
    position:relative
}
#navtop li a {
    height:18px;
    padding:0 10px;
    line-height:18px;
    display:block
}
#navtop li.dgnsubtop {
    padding-right:10px;
    background-image:url(http://4.bp.blogspot.com/-NTKXiugkHrs/UIeVQmEzDjI/AAAAAAAAGJ4/G92p5n8hgvY/s7/downarrow-dark.png);
    background-repeat:no-repeat;
    background-position:90% 50%
}
#navtop ul.sub-menu-top {
    display:none;
    position:absolute;
    width:140px;
    background:#F1F1F1;
    top:23px;
    -webkit-box-shadow:0 3px 4px 1px rgba(0, 0, 0, 0.2);
    -moz-box-shadow:0 3px 4px 1px rgba(0, 0, 0, 0.2);
    box-shadow:0 3px 4px 1px rgba(0, 0, 0, 0.2);
    z-index:2
}
#navtop ul.sub-menu-top.hidden {
    display:block;
    -khtml-opacity:0;
    -moz-opacity:0;
    opacity:0;
    visibility:hidden;
    -webkit-transition:all 0.5s ease 0s;
    -o-transition:all 0.5s ease 0s;
    transition:all 0.5s ease 0s;
    -moz-transition:all 0.5s ease 0s
}
#navtop li:hover ul.sub-menu-top.hidden {
    -khtml-opacity:1;
    -moz-opacity:1;
    opacity:1;
    visibility:visible
}
#navtop ul.sub-menu-top li {
    width:100%;
    height:22px;
    border-bottom:1px solid white;
    border-top:1px solid lightGrey
}
#navtop ul.sub-menu-top li:first-child {
    border-top:0 none
}
#navtop ul.sub-menu-top a:hover {
    padding-left:15px
}
input {
    font-family:arial, sans-serif
}
.FollowByEmail .follow-by-email-inner::-webkit-input-placeholder, .FollowByEmail .follow-by-email-inner input:-moz-placeholder {
    font-size:13px;
    font-family:arial, sans-serif;
    color:#999
}



 #menu {
     background-image:url(http://4.bp.blogspot.com/-Qfv2CUXkZQE/UJOrNu3iNAI/AAAAAAAAGc8/wvy8sCPa8HA/s1600/main-menu-bg.png);
     background-repeat:repeat-x;
     height:55px;
     border-bottom:5px solid #A00F0F;
     padding:0
 }
 #menu ul, #menu li {
     margin:0;
     margin-top:5px;
     padding:0 0;
     list-style:none
 }
 #menu ul {
     height:45px;
     width:100%
 }
 #menu li {
     float:left;
     display:inline;
     position:relative;
     font:normal normal 11px Verdana, Geneva, sans-serif
 }
 #menu a {
     display:block;
     line-height:40px;
     padding:0 14px;
     text-decoration:none;
     color:#FFF
 }
 #menu li a:hover {
     color:#E4E4E4;
     -webkit-transition:all .1s ease-in-out;
     -moz-transition:all .1s ease-in-out;
     -ms-transition:all .1s ease-in-out;
     -o-transition:all .1s ease-in-out;
     transition:all .1s ease-in-out;
     background:#383838
 }
 #menu input {
     display:none;
     width:100%;
     height:100%;
     opacity:50;
     cursor:pointer
 }
 #menu label {
     font:bold 30px Arial;
     display:none;
     width:35px;
     height:36px;
     line-height:36px;
     text-align:center;
     margin-top:7px
 }
 #menu label span {
     font-size:18px;
     width:100px;
     height:45px;
     position:absolute;
     left:35px
 }
 #menu ul.menus {
     height:auto;
     overflow:hidden;
     width:170px;
     background:#5A77A0;
     position:absolute;
     z-index:99;
     display:none
 }
 #menu ul.menus li {
     display:block;
     width:100%;
     font:bold 11px Arial;
     text-transform:none;
     text-shadow:none;
     border-bottom:1px dashed #31AFDB
 }
 #menu ul.menus a {
     color:#FFF;
     line-height:35px
 }
 #menu li:hover ul.menus {
     display:block
 }
 #menu ul.menus a:hover {
     background:#5FC6EB;
     color:#FFF;
     -webkit-transition:all .1s ease-in-out;
     -moz-transition:all .1s ease-in-out;
     -ms-transition:all .1s ease-in-out;
     -o-transition:all .1s ease-in-out;
     transition:all .1s ease-in-out
 }
 [MENTION=16931]medi[/MENTION]a screen and (max-width: 800px) {
     #menu {
         position:relative
     }
     #menu ul {
         background:#111;
         position:absolute;
         top:100%;
         right:0;
         left:0;
         z-index:3;
         height:auto;
         display:none
     }
     #menu ul.menus {
         width:100%;
         position:static;
         padding-left:20px
     }
     #menu li {
         display:block;
         float:none;
         width:auto;
         font:normal 11px Arial
     }
     #menu input, #menu label {
         position:absolute;
         top:0;
         left:0;
         display:block
     }
     #menu input {
         z-index:4
     }
     #menu input:checked+label {
         color:white
     }
     #menu input:checked~ul {
         display:block
     }
 }



       
body {
	background-color: #006600;
}
</style>


<nav id='menu'>
<div class='checkbox'></div>
<input type='checkbox'/>
<label>≡<span>Ir al Menú</span></label>

<ul>
<li><a href='#'>Home</a></li>
<li><a href='#'>Terminos y Condiciones</a></li>
<li><a href='#'>Politicas de Privacidad</a></li>
<li><a href='#'>Cookies</a></li>
<li><a href='#'>Acerca de</a></li>
</ul>
</nav>

lombervid · 11 Oct 2014

No le pusiste el @ al media, o al copiarlo aqui te la elimino? :distant:

leit0s · 11 Oct 2014

lombervid dijo:
No le pusiste el @ al media, o al copiarlo aqui te la elimino? :distant:

Al copiarlo lo elimina amigo.

lombervid · 11 Oct 2014

Y en las tables y mobiles como se ve?
Si le has puesto el meta viewport?

xxSakuraxx · 11 Oct 2014

Porque no intentas pegar el código con las etiquetas html para que salgan los @

HTML:

leit0s · 11 Oct 2014

lombervid dijo:
Y en las tables y mobiles como se ve?
Si le has puesto el meta viewport?

Se muestra tal cual en la imagen, solo que no funciona el menu, no lo desplega al hacer click y es por ello que me pregunto si acaso es el input que no es reconocido o que sucede.

- - - Actualizado - - -

xxSakuraxx dijo:
Porque no intentas pegar el código con las etiquetas html para que salgan los @

HTML:

@

lo acabo de hacer y lo coloca

HTML:

[MENTION=16931]medi[/MENTION]

lombervid · 11 Oct 2014

Edito, porque ya vi como tienes el código :witless:

- - - Actualizado - - -

Fijate si te cambia el color del label, sino lo más seguro es que los dispositivos no te esten reconociendo el :checked o algun otro selector.

Ayuda necesaria con menú responsive en Bootstrap

leit0s

lombervid

leit0s

lombervid

xxSakuraxx

leit0s

lombervid

Temas similares