1

Tengo una plantilla de wordpress que compre, pero ya no me dan soporte :S, la cosa es que tengo un menú que se abre y se cierra (todo bien) pero tambien tengo un submenú que debería abrirse y cerrarse...

Ahora tengo que aclarar que en pantalla completa el submenú se cierra y se abre automáticamente al pasar el click

pero en móvil La cosa cambia y el sub menú cuando le doy click se abre, pero despues asi le de 100mil clicks nunca mas se cierra y eso molesta a la experiencia del usuario en movil.

¿Cómo debería hacer para que se cierre en movil?

introducir la descripción de la imagen aquí

HTML

 <li class="menu-item-753 menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children sf-std-menu parent">

<a><span class="menu-item-text">
<i class="_mi _before dashicons dashicons-businessman" aria-hidden="true"></i>

<span>appuser: <span class="edd-wallet-value">$125,03</span></span></span></a>
    <ul class="sub-menu">
        <li class="menu-item-786 menu-item menu-item-type-custom menu-item-object-custom sf-std-menu        "><a></a><a href="" title="Cargar Cuenta"> Disponible: <span class="edd-wallet-value">$125,03</span>   &gt;</a></li>
        <li class="menu-item-1157 menu-item menu-item-type-custom menu-item-object-custom sf-std-menu        "><a href=""></a><a href="" title="Historial de Predicciones y Servicios"> Historial de Compras &gt;</a></li>
        <li class="menu-item-1188 menu-item menu-item-type-custom menu-item-object-custom sf-std-menu        "><a href=""></a><a href="" title="Ver Historial de Puntos"> Puntos de Lealtad &gt;</a></li>
    </ul>
    </li> 

CSS

element.style {
}
@media only screen and (max-width: 979px)
responsive.css:517
nav#main-navigation .menu > li > a, .header-4 nav .menu > li > a, .header-4 nav .menu > li > a, .header-5 nav .menu > li > a, .header-4 nav#main-navigation .menu > li > a, .header-5 nav#main-navigation .menu > li > a {
    padding: 12px 0;
}

@media only screen and (max-width: 1024px)
responsive.css:242
.mh-tabletland nav#main-navigation .menu > li > a, .mh-tabletland .header-4 nav .menu > li > a {
    padding: 12px 0;
}
style.css:3369
.header-4 nav .menu > li > a, .header-5 nav .menu > li > a, .header-4 nav#main-navigation .menu > li > a, .header-5 nav#main-navigation .menu > li > a {
    padding: 0 10px;
    margin: 0;
}
style.css:3366
nav#main-navigation .menu > li > a {
    padding: 0 12px;
}
@media only screen and (max-width: 1024px)
responsive.css:192
.mh-tabletland nav .menu li a {
    padding: 8px 0;
    margin: 0;
}
style.css:3430
nav .menu > li:first-child > a {
    padding-left: 0;
}
(index):206
nav .menu > li a, #menubar-controls a {
    color: #252525;
}
@media only screen and (max-width: 979px)
responsive.css:429
nav .menu li a {
    padding: 8px 0;
    margin: 0;
}
style.css:3422
nav .menu li > a {
    text-decoration: none;
    padding: 0 12px;
    display: block;
    white-space: nowrap;
    background: transparent;
    position: relative;
}
(index):174
a, .ui-widget-content a {
    color: #000000;
}
style.css:161
a {
    transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
}
bootstrap.min.css:9
a {
    color: #08c;
    text-decoration: none;
}
Inherited from li.menu-item-753.menu-item.menu-item-type-custom.menu-item-object-custom.menu-item-has-children.sf-std-menu.parent
(index):183
#header-section.header-4 #header nav#main-navigation ul.menu > li, #header-section.header-5 #header nav#main-navigation ul.menu > li, #header-section.header-4 .header-right nav ul.menu > li, #header-section.header-5 .header-left nav ul.menu > li {
    line-height: 110px;
}
style.css:3588
#main-navigation ul.menu > li {
    float: none;
    display: inline-block;
    line-height: 44px;
}
@media only screen and (max-width: 1024px)
responsive.css:174
.mh-tabletland nav .menu > li {
    float: none;
    display: block;
    padding: 2px 0;
    width: 100%;
    font-size: 12px;
    border-top: 1px solid #e4e4e4;
    overflow: hidden;
    line-height: inherit!important;
    text-align: left;
    border: 0;
}
(index):152
nav .menu li {
    font-size: 14px;
}
(index):144
nav .menu li {
    font-family: "Tahoma", Palatino, Arial Helvetica, Tahoma, sans-serif;
}
@media only screen and (max-width: 979px)
responsive.css:411
nav .menu > li {
    float: none;
    display: block;
    padding: 2px 0;
    width: 100%;
    font-size: 12px;
    border-top: 1px solid #e4e4e4;
    overflow: hidden;
    line-height: inherit!important;
    text-align: left;
    border: 0;
}
style.css:3412
nav .menu li {
    position: relative;
    display: inline-block;
    float: left;
    font-size: 14px;
    margin: 8px 0;
}
bootstrap.min.css:9
li {
    line-height: 20px;
}
user agent stylesheet
li {
    display: list-item;
    text-align: -webkit-match-parent;
}
Inherited from ul#menu-header.menu
style.css:3585
.header-4 #main-navigation ul.menu {
    text-align: right;
}
style.css:3581
#main-navigation ul.menu {
    text-align: left;
    position: static;
}
style.css:210
ul {
    list-style: none;
    margin: 0 0 20px;
}
user agent stylesheet
ul, menu, dir {
    display: block;
    list-style-type: disc;
    -webkit-margin-before: 1em;
    -webkit-margin-after: 1em;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
    -webkit-padding-start: 40px;
}
Inherited from body.home.page-template-default.page.page-id-328.logged-in.admin-bar.mh-tabletland.page-shadow.responsive-fluid.um-page-activity.um-page-loggedin.customize-support.mobile-browser
(index):235
body, input[type="text"], input[type="password"], input[type="email"], textarea, select {
    color: #222222;
}
(index):170
body {
    color: #222222;
}
(index):145
body, p, .masonry-items .blog-item .quote-excerpt, #commentform label, .contact-form label {
    font-size: 16px;
    line-height: 22px;
}
(index):142
body, h6, #sidebar .widget-heading h3, #header-search input, .header-items h3.phone-number, .related-wrap h4, #comments-list > h3, .item-heading h1, .sf-button, button, input[type="submit"], input[type="email"], input[type="reset"], input[type="button"], .spb_accordion_section h3, #header-login input, #mobile-navigation > div, .search-form input, input, button, select, textarea {
    font-family: "Tahoma", Palatino, Arial, Helvetica, Tahoma, sans-serif;
}
style.css:170
body, h1, h2, h3, h4, h5, h6 {
    font-family: "Myriad Pro", Arial, Helvetica, Tahoma, sans-serif;
}
style.css:155
body {
    padding: 0;
    margin: 0;
    font-size: 14px;
    -webkit-font-smoothing: antialiased;
}
bootstrap.min.css:9
body {
    margin: 0;
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size: 14px;
    line-height: 20px;
    color: #333;
    background-color: #fff;
}
Inherited from html
bootstrap.min.css:9
html {
    font-size: 100%;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
}
Pseudo ::after element
@media only screen and (max-width: 1024px)
responsive.css:282
.mh-tabletland #main-navigation ul li.parent > a:after {
    content: "\f078";
    font-family: FontAwesome;
    font-weight: normal;
    font-style: normal;
    display: inline-block;
    text-decoration: inherit;
    font-size: 24px;
    margin-right: -3px;
    opacity: 0.5;
    float: right;
    border-bottom: 0!important;
    right: 0;
    left: auto;
    font-size: 14px;
    font-weight: normal;
    margin-top: -11px;
    top: 50%;
}
@media only screen and (max-width: 979px)
responsive.css:488
#main-navigation ul li.parent > a:after {
    content: "\f078";
    font-family: FontAwesome;
    font-weight: normal;
    font-style: normal;
    display: inline-block;
    text-decoration: inherit;
    font-size: 24px;
    margin-right: -3px;
    opacity: 0.5;
    float: right;
    border-bottom: 0!important;
    right: 0;
    left: auto;
    font-size: 14px;
    font-weight: normal;
    margin-top: -11px;
    top: 50%;
}
@media only screen and (max-width: 1024px)
responsive.css:189
.mh-tabletland nav.std-menu ul.menu > li.parent > a:after {
    display: none;
}
(index):221
nav.std-menu ul.menu > li.parent > a:after {
    border-bottom-color: #ef5828;
}
@media only screen and (max-width: 979px)
responsive.css:426
nav.std-menu ul.menu > li.parent > a:after {
    display: none;
}
style.css:3436
nav.std-menu ul.menu > li.parent > a:after {
    content: " ";
    display: block;
    border-bottom: 8px solid #fff;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: none;
    margin-top: -8px;
    position: absolute;
    left: 50%;
    margin-left: -8px;
    opacity: 0;
    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
}  

Espero que esto sea lo que se necesite

3
  • 1
    Por favor edita tu pregunta siguiendo las directrices de esta guía Cómo preguntar. De ser posible agrega un ejemplo mínimo verificable que ilustre tu problema.
    – toledano
    Commented el 17 sept. 2017 a las 22:39
  • 1
    gracias, lo haré Commented el 18 sept. 2017 a las 0:26
  • 1
    Has comprobado que la consola de desarrollo del navegador no lance ningún error al pinchar sobre el submenú?. Lo mismo te está lanzando un error, al no poder cerrarlo, y no lo estás contemplando. Commented el 27 feb. 2019 a las 12:36

1 respuesta 1

1

amigo, lo mejor será que revises los javascript o jquery que usa para el menú, porque en los css o html no podemos ayudarte. tendrias que revisar qué función hace que cuando haces click o doble click detecta que abre o cierra, Saludos.

3
  • 1
    gracias, no sabia eso, veré que encuentro Commented el 18 sept. 2017 a las 19:37
  • 1
    Hola, estuve viendo el código de functions.js localizado en la carpeta js dentro de mi tema, pero al quitar el codigo que sospecho que es el de los menús, no pasa nada, se supone que al quitarlo debería no cerrarse ni abrirse, pero aun sigue haciendo eso, parece que ese no es el código, aunque lo revise y la class concordaba... Commented el 19 sept. 2017 a las 2:27
  • 1
    que tal amigo, te recomendaria en el caso de que estes seguro y no veas el cambio, utilizar incógnito ya que algunas veces se queda en cache y por más que actualizas no lo ves, me confirmas si fue ese el problema, saludos.
    – Brayan LP
    Commented el 20 sept. 2017 a las 2:27

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.