Comment ouvrir Wordpress SubMenu

Question

Je suis en train de personnaliser un site web dans WordPress, je suis bloqué dans le menu responsive mobile. Je veux que mon menu soit tactile pour ouvrir le sous-menu mais au lieu de cela, j'obtiens tous les menus et sous-menus visibles en même temps aussi je veux que le menu s'ouvre à mi-chemin au lieu d'ouvrir en plein écran. Ceci est mon site Web link

Cette requête multimédia masque le sous-menu mais comment puis-je ouvrir le sous-menu lorsque j'appuie sur un mobile?

@media screen and (max-width: 990px) { 
    .sub-menu {display: none !important;} 

} 

Ceci est mon menu code CSS:

.store-menu { 
    background: #0bb1af none repeat scroll 0 0; 
} 
.main-navigation { 
    clear: both; 
    display: block; 
    float: left; 
    width: 100%; 
} 

.main-navigation ul { 
    list-style: none; 
    margin: 0; 
    padding-left: 0; 
} 
.main-navigation ul.menu li::before { 
    border-right: 1px solid #099896; 
    content: ""; 
    height: 100%; 
    position: absolute; 
    right: -2px; 
    top: 0; 
} 
.main-navigation ul.menu li:last-child::before { 
    border-right: none; 
} 

.main-navigation li { 
    display: inline-block; 
    font-family: "Lato"; 
    font-size: 16px; 
    font-weight: normal; 
    position: relative; 
    text-transform: uppercase; 
    transition: all ease-in-out 0.3s; 
    -webkit-transition: all ease-in-out 0.3s; 
    -moz-transition: all ease-in-out 0.3s; 
} 
.main-navigation li a { 
    display: block; 
    text-decoration: none; 
    padding: 15px; 
    color: #fff; 
} 

.main-navigation ul ul { 
    background: #0bb1af; 
    box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2); 
    position: absolute; 
    top: 110%; 
    left: 0; 
    min-width: 200px; 
    white-space: nowrap; 
    border-bottom-left-radius: 3px; 
    border-bottom-right-radius: 3px; 
    transition: all ease-in-out 0.3s; 
    -webkit-transition: all ease-in-out 0.3s; 
    -ms-transition: all ease-in-out 0.3s; 
    opacity: 0; 
    visibility: hidden; 
    z-index: 99999; 
} 
.main-navigation ul li:hover > ul.sub-menu { 
    top: 100%; 
    opacity: 1; 
    filter: Alpha(opacity= 100); 
    visibility: visible; 
} 
.main-navigation ul ul.sub-menu li:before { 
    border-right: none; 
    } 
.main-navigation ul ul.sub-menu li { 
    display: block; 
    border-bottom: 1px solid #00908d; 
    position: relative; 
} 
.main-navigation ul ul.sub-menu li:last-child { 
    border-bottom: none; 
} 
.main-navigation ul ul.sub-menu li a { 
    padding-top: 10px; 
    padding-bottom: 10px; 
    /*margin-bottom: 5px;*/ 
    font-size: 14px; 
    } 
.main-navigation ul ul.sub-menu li ul { 
    position: absolute; 
    left: 110%; 
    top: 0; 
    border-bottom-left-radius: 0; 
    border-top-right-radius: 5px; 
    } 
.main-navigation ul ul.sub-menu li:hover ul { 
    left: 100%; 
    top: 0; 
    } 

.main-navigation ul ul li:hover > ul, 
.main-navigation ul ul li.focus > ul { 
    left: 100%; 
    top: 100%; 
} 

.nav-menu li a:hover, .main-navigation .current_page_item > a, 
.main-navigation .current-menu-item > a, 
.main-navigation .current_page_ancestor > a { 
    background: #1B8E8D; 
} 
.main-navigation ul li:last-child ul { 
    left: inherit; 
    right: 0; 
} 

.main-navigation ul li:last-child ul ul { 
    left: inherit; 
    right: 110%; 
} 

.main-navigation ul li:last-child ul li:hover ul { 
    border-radius: 5px 0 0 5px; 
    left: inherit; 
    right: 100%; 
} 

@media screen and (min-width: 37.5em) { 
    .menu-toggle { 
     display: none; 
    } 
    .main-navigation ul { 
     display: block; 
    } 
} 

.site-main .comment-navigation, 
.site-main .posts-navigation, 
.site-main .post-navigation { 
    margin: 0 0 1.5em; 
    overflow: hidden; 
    } 

.comment-navigation .nav-previous, 
.posts-navigation .nav-previous, 
.post-navigation .nav-previous { 
    float: left; 
    width: 50%; 
    } 

    .comment-navigation .nav-next, 
    .posts-navigation .nav-next, 
    .post-navigation .nav-next { 
    float: right; 
    text-align: right; 
    width: 50%; 
    } 

Answer 1

Essayez le code ci-dessous.

Il suffit de lier une fonction de clic à votre #primary-menu à tous les éléments qui ont .menu-item-has-children. Si vous cliquez dessus, il obtiendra le ul le plus proche et vérifiera si le class est sub-menu. Sinon, il va empêcher le clic et display: block !important le sub-menu.

J'espère que cela vous aide.

jQuery('#primary-menu .menu-item-has-children').click(function(event) { // Bind click function 
    var clickedElement = jQuery(event.target.closest('ul')); // find which element is clicked 
    if (clickedElement.attr("class") != "sub-menu" && window.matchMedia('(max-width: 767px)').matches) { // If the element is NOT a sub-menu and the width of the screen is below 990px 
     event.preventDefault(); // prevent the user from accessing it 
     jQuery(this).find('.sub-menu').attr('style','display: block !important'); // and display the sub-menu 
    } 
}); 

Vous pouvez ajouter quelque chose qui va supprimer la display: block !important de tous les autres sub-menu « s. Comme ceci à l'intérieur de la fonction de clic: