Skip to content

Active Class Font Color Not Working #528

New issue

Have a question about this project? # for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “#”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? # to your account

Closed
ferryfernando opened this issue Nov 5, 2021 · 3 comments · May be fixed by #531
Closed

Active Class Font Color Not Working #528

ferryfernando opened this issue Nov 5, 2021 · 3 comments · May be fixed by #531

Comments

@ferryfernando
Copy link

Steps to reproduce the issue:

I use:

  • Wordpress 5.8.1
  • Boostrap 5.1

What I expected:

Active page link have white color.

What happened instead:

Active page link color not change.

@IanDelMar
Copy link
Collaborator

IanDelMar commented Nov 8, 2021

Hi @ferryfernando, there's a change from Bootstrap 4 to Bootstrap 5 regarding the placement of the .active class for nav-link items. While using Bootstrap 4 one has to add the .active class to the li-element, using Bootstrap 5 one has to add it to the a-element.

Put this in your functions.php:

add_filter( 'nav_menu_link_attributes', 'prefix_add_active_class_to_anchor', 10, 3 );
function prefix_add_active_class_to_anchor( $atts, $item, $args ) {
	if ( false === prefix_is_active_wp_bootstrap_navwalker_item( $item, $args ) ) {
		return $atts;
	}

	if ( isset( $atts['class'] ) ) {
		$atts['class'] .= ' active';
	} else {
		$atts['class'] = 'active';
	}
	return $atts;
}

function prefix_is_active_wp_bootstrap_navwalker_item( $item, $args ) {
	if ( ! property_exists( $args, 'walker' ) || ! is_a( $args->walker, 'WP_Bootstrap_Navwalker') ) {
		return false;
 	}
	if ( ! $item->current && ! $item->current_item_ancestor ) {
		return false;
 	}

	return true;
}

If you also want to remove the .active class which is set on the li-element, put this in your functions.php as well:

add_filter( 'nav_menu_css_class', 'prefix_remove_active_class_from_li', 10, 3 );
function prefix_remove_active_class_from_li( $classes, $item, $args ) {
	if ( false === prefix_is_active_wp_bootstrap_navwalker_item( $item, $args ) ) {
		return $classes;
	}

	return array_diff( $classes, array( 'active' ) ) ;
}

Let me know if that helps.

@ferryfernando
Copy link
Author

ferryfernando commented Aug 24, 2023

It's working! Thank you <3

With up to date Wordpress and Bootsrap

@mz30
Copy link

mz30 commented May 12, 2024

inside class-wp-bootstrap-navwalker.php file add style or class

      if ( false !== strpos( $args->items_wrap, 'itemscope' ) && false === $this->has_schema ) {
			      $this->has_schema  = true;
			      $args->link_before = '<span style="color:black" itemprop="name">' . $args->link_before;
			      $args->link_after .= '</span>';
		      }

# for free to join this conversation on GitHub. Already have an account? # to comment
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants