What is the Understrap way to add .dropdown-menu-end class to far right menu so dropdown doesn't go off the page? #2146
-
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 { 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? |
Beta Was this translation helpful? Give feedback.
Replies: 2 comments 1 reply
-
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.
|
Beta Was this translation helpful? Give feedback.
-
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 );
}
// [...]
} |
Beta Was this translation helpful? Give feedback.
For a PHP solution you would have to adjust the nav walker like so: