Add onclick function in wp_nav_menu dynamic menu in Wordpress

Asked

Viewed 27 times

0

I have a dynamic menu in Wordpress and I’m wanting to add a function so when press the menu link it hide the entire menu on mobile. In case it would only be to take the class show from #Mainnav when clicking on a 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()
  ));
 ?>
javascript wordpress

  • And what’s not working?

  • @Sam when I click on the 'a" link it does not remove the class.

  • 1

    Try: $(document).on('click','#main-nav li a', function() {

  • Vlw friend worked, I will try to find a way to pull this straight by wordpress now to stick a little more beautiful, but important that worked :)

1 answer

0

You can do this with CSS (media queries). It works when you have two menus (this is very common in Wordpress), one for Desktop and one for mobile. CSS would look like this:

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

This one you hide the desktop menu on mobile

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

Browser other questions tagged javascript wordpress

You are not signed in. Login or sign up in order to post.