What is the Understrap way to add .dropdown-menu-end class to far right menu so dropdown doesn't go off the page?

[currentcreative]

I can't figure out how to add this unique class to just one dropdown because of the way Wordpress creates its menus with a nav walker. If I was just hard-coding a Boostrap 5 menu, I'd simply put the class right in the UL, but

I've tried to get around it by adding my own special "dropdown-menu-right" class through the Wordpress dashboard Menus area and then tried to mimick the original Bootstrap 5 code in my CSS like this:

.dropdown-menu-right > a > ul {
--bs-position: end;
}

But, it hasn't changed anything...this is most likely because I can see the CSS is actually much more complicated than that when I trace it down in _dropdown.scss. But, I'm not going to paste all that code here and confuse the issue by making this a really long post.

Is there a way to make Wordpress add a class in the last dropdown on the right in my template? Or a specific Understrap way of doing this that I haven't found in the docs yet?

[currentcreative]

So, here's what I ended up doing which works fine but it would be much better to just use the Bootstrap 5 class if possible.

1. added "dropdown-menu-right" class in Wordpress dashboard > Menus to the top link that opens the dropdown.
2. added this CSS to my theme:
   // last dropdown on the right - position so its orientation is not going off the page
   .dropdown-menu-right ul {
   right: 0 !important;
   left: auto !important;
   }

[IanDelMar]

For a PHP solution you would have to adjust the nav walker like so:

// inc/class-wp-bootstrap-navwalker.php

class Understrap_WP_Bootstrap_Navwalker extends Walker_Nav_Menu {

	const DROPDOWN_MENU_CLASSES = array(
		'dropdown-menu-end',
		'dropdown-menu-start',
		'dropdown-menu-right',
		'dropdown-menu-left',
		'dropdown-menu-sm-end',
		'dropdown-menu-sm-start',
		'dropdown-menu-sm-right',
		'dropdown-menu-sm-left',
		'dropdown-menu-md-end',
		'dropdown-menu-md-start',
		'dropdown-menu-md-right',
		'dropdown-menu-md-left',
		'dropdown-menu-lg-end',
		'dropdown-menu-lg-start',
		'dropdown-menu-lg-right',
		'dropdown-menu-lg-left',
		'dropdown-menu-xl-end',
		'dropdown-menu-xl-start',
		'dropdown-menu-xl-right',
		'dropdown-menu-xl-left',
		'dropdown-menu-xxl-end',
		'dropdown-menu-xxl-start'
	);

	private $dropdown_menu_classes = array();

	// [...]

	public function start_lvl( &$output, $depth = 0, $args = array() ) {
		// [...]
		// Default class to add to the file.
		$classes = array( 'dropdown-menu' );
		if ( count( $this->dropdown_menu_classes ) > 0 ) {
			$classes = array_merge( $classes, $this->dropdown_menu_classes );
		}
		// [...]
	}

	// [...]

	public function display_element( $element, &$children_elements, $max_depth, $depth, $args, &$output ) {
		// [...]

		$this->dropdown_menu_classes = array_intersect( $element->classes, self::DROPDOWN_MENU_CLASSES );
		$element->classes = array_diff( $element->classes, $this->dropdown_menu_classes );

		parent::display_element( $element, $children_elements, $max_depth, $depth, $args, $output );
	}

	// [...]
}

[currentcreative]

Thank you, Ian! I really appreciate all the help you've given me with Understrap over the last several months.