X
X
xdvz2020-01-28 08:40:03
User navigation
xdvz, 2020-01-28 08:40:03

Highlight active wordpress menu item?

Good afternoon!

For several days I have been racking my brains on how to implement this function in a "custom" menu with anchors.
Connoisseurs, tell me where to look and what to change.

Insert menu in header

<div class="catalog_menu">
    <div class="container">


        <?php
        wp_nav_menu( array(
            'theme_location'  => 'second',
            'menu'            => 'main_menu',
            'container'       => 'div',
            'container_class' => '',
            'container_id'    => '',
            'menu_class'      => 'catalog_menu_wrap',
            'menu_id'         => '',
            'echo'            => true,
            'fallback_cb'     => 'wp_page_menu',
            'before'          => '',
            'after'           => '',
            'link_before'     => '',
            'link_after'      => '',
            'items_wrap'      => '<ul id="%1$s" class="%2$s">%3$s</ul>',
            'depth'           => 0,
            'walker'          => '',
        ) );
        ?>

    </div>
</div>

On the page
<div class="cat_menu">
 <?php if(pll_current_language() == 'en') { ?>
    <?php
      wp_nav_menu(array(
        'theme_location' => 'primary_cat',
        'menu_class' => 'menu',
        'menu' => 'меню_категорий_en',
        'container' => false
      ));
      ?>
    <?php  }
else if(pll_current_language() == 'ru') { ?>
<?php
      wp_nav_menu(array(
        'theme_location' => 'primary_cat',
        'menu_class' => 'menu',
        'menu' => 'меню_категорий',
        'container' => false
      ));
      ?>
          <?php  }  
        ?>   

</div>

<div class="cat_items">
    <?php
$_terms = get_terms( array(
    'taxonomy'     => 'catalog_category',
    'orderby'      => 'name',
    'order'        => 'DESC',
) );

foreach ($_terms as $term) :

    $term_slug = $term->slug;
    $_posts = new WP_Query( array(
                'post_type'         => 'catalog',
                'tax_query' => array(
                    array(
                        'taxonomy' => 'catalog_category',
                        'field'    => 'slug',
                        'terms'    => $term_slug,
                    ),
                ),
            ));


    if( $_posts->have_posts() ) :

        echo '<div id="'. $term->slug .'" class="cat_item">';
        echo '<h2 class="cat_title">'. $term->name .'</h2>';
        echo '<div class="cat_desc">';

Scroll to anchor
<script>
    $(function(){
  $('a[href^="#"]').on('click', function(event) {
    event.preventDefault();

    var sc = $(this).attr("href"),
        dn = $(sc).offset().top - 100;
    $('html, body').animate({scrollTop: dn}, 1000);
  });
});
</script>

Answer the question

In order to leave comments, you need to log in

1 answer(s)
P
Pavel, 2020-01-28
@xdvz

Well, if there is

<script>
    $(function(){
  $('a[href^="#"]').on('click', function(event) {
    event.preventDefault();

    var sc = $(this).attr("href"),
        dn = $(sc).offset().top - 100;
    $('html, body').animate({scrollTop: dn}, 1000);
  });
});
</script>

It is not an option for the same click to simply add a class where necessary, for example, to the link itself: If you need only a menu item, you can conditionally add a class via JS, or set styles for the menu class only....
$(this).addClass('currentActive');

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question