Skip to content
New issue

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

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

Already on GitHub? Sign in to your account

Active Class Font Color Not Working #528

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

@mbosoft
Copy link

mbosoft 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>';
		      }

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

Successfully merging a pull request may close this issue.

3 participants