0

tenho um menu dinâmico em Wordpress e estou querendo adicionar uma função para quando apertar no link do menu ele esconder todo o menu no mobile. No caso seria somente para tirar a class show do #mainnav quando clicar em um menu

    $('#main-nav li a').on('click', function() {
        $('#main-nav').removeClass('show');
    });


<?php
 wp_nav_menu(array(
    'theme_location'    => 'primary',
    'container'       => 'div',
    'container_id'    => 'main-nav',
    'container_class' => 'collapse navbar-collapse justify-content-center',
    'menu_id'         => false,
    'menu_class'      => 'navbar-nav',
    'add_li_class'    => 'nav-item',
    'depth'           => 3,
    'fallback_cb'     => 'wp_bootstrap_navwalker::fallback',
    'walker'          => new wp_bootstrap_navwalker()
  ));
 ?>
4
  • E o que não está dando certo?
    – Sam
    Commented 9/07/2021 às 17:27
  • @Sam quando eu clico no link 'a" ele não remove a class.
    – kaiquemix
    Commented 9/07/2021 às 18:27
  • 1
    Tente: $(document).on('click','#main-nav li a', function() {
    – Sam
    Commented 9/07/2021 às 20:08
  • Vlw amigo funcionou, vou tentar achar uma maneira de puxar isso direto pelo wordpress agora para fincar um pouco mais bonito, mas importante que funcionou :)
    – kaiquemix
    Commented 12/07/2021 às 16:13

1 Resposta 1

0

Você pode fazer isso com CSS (media queries). Funciona quando você tem dois menus (isso é bem comum no Wordpress), um para Desktop e um para mobile. O CSS ficaria assim:

@media screen and (max-width: 1023px) { {
  #main-nav {
    display: none !important; // eu sempre deixo o !important para forçar a condição.
  }
}

Esse aqui você esconde o menu desktop no mobile

@media screen and (min-width: 1024px) { {
  #navegacaomobile {
    display: none !important; // eu sempre deixo o !important para forçar a condição.
  }
}

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .