WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Adding .active class to active menu item (8 posts)

  1. AD7863
    Member
    Posted 1 year ago #

    Hello, I am aware that the class .current-menu-item is added to active menu items, instead, I would like to add the class .active. How would I go about doing this?

    I've been told I have to put this in my functions.php file, I just don't know to test if the link is active e.g. is_active() or something..?

    Any help will be appreciated, thanks.

    add_filter('nav_menu_css_class' , 'special_nav_class' , 10 , 2);
    function special_nav_class($classes, $item){
         if( put something here ) ) ){
                 $classes[] = 'active ';
         }
         return $classes;
    }
  2. keesiemeijer
    moderator
    Posted 1 year ago #

    Try it with this:

    add_filter('nav_menu_css_class' , 'special_nav_class' , 10 , 2);
    function special_nav_class($classes, $item){
         if( in_array('current-menu-item', $classes) ){
                 $classes[] = 'active ';
         }
         return $classes;
    }
  3. AD7863
    Member
    Posted 1 year ago #

    It worked. Thanks so much.

  4. keesiemeijer
    moderator
    Posted 1 year ago #

    No problem :-)

  5. poco06
    Member
    Posted 1 year ago #

    Hello,

    Can you tell me where you placed this code within your function.php file? I have the same issue and would like to use the active menu position.
    Many thanks
    Pat

  6. AD7863
    Member
    Posted 1 year ago #

    Hey, I have long since abandoned WordPress and transferred my blog to Jekyll.

    You can put that snippet anywhere in your functions.php file before the closing '?>' though I think.

  7. tonety_bcn
    Member
    Posted 1 year ago #

    Hello,

    My menu item "Blog" does not look as .current in single post, archive, category.

    http://www.barcelonawebstudio.com/blog

    Please, does anyone know how to fix this problem?

    This is how my header looks like:

    <?php

    /* wp_nav_menu( array(
    'container' =>false,
    'menu_class' => 'nav',
    'echo' => true,
    'before' => '',
    'after' => '',
    'link_before' => '',
    'link_after' => '',
    'depth' => 0,
    'walker' => new description_walker())
    ); */

    if ( has_nav_menu( 'header-menu' ) ) {
    wp_nav_menu( array( 'theme_location' => 'header-menu', 'container' => 'false', 'menu_id' => 'nav', 'depth' => '5', 'fallback_cb' => 'wp_page_menu', 'items_wrap' => '<ul id="%1$s" >%3$s', 'walker' => new description_walker()) );
    } ?>

    You'll have to forgive me, I'm fairly new at this and am learning as I go along. Your help is greatly appreciated.

    Thanks in advance ;))

    Best regards from Barcelona,

    tonety_bcn

  8. iceolemune
    Member
    Posted 10 months ago #

    I'm having a problem with my custom theme not adding a custom class to my menu on the initial wp load (first page load).

    I'm using the code mentioned above:

    add_filter('nav_menu_css_class' , 'special_nav_class' , 10 , 2);
    function special_nav_class($classes, $item){
         if( in_array('current-menu-item', $classes) ){
                 $classes[] = 'active ';
         }
         return $classes;
    }

    Which works nearly perfectly. But when I visit my site it automatically goes to the "home" page by default, but because there appears to be no page_id or anything mentioned in the $_GET, no active css class is applied to any menu items. If I navigate the site from here via my menu, the active class is added normally.

    How do I apply my active css class to the main page by default? Or to the default page that's loaded if this can be specified?

    Any feedback would be appreciated. Thanks.

Topic Closed

This topic has been closed to new replies.

About this Topic