wordpressglyphiconswp-nav-walker

Wordpress Bootstrap WP Bootstrap Navwalker icon on the wrong side

I have a Wordpress Bootstrap site. I implemented WP Bootstrap Navwalker for dropdown menu functionality without issues. I followed directions using the provided code examples here: https://github.com/wp-bootstrap/wp-bootstrap-navwalker. Everything works really well.

However, the dropdown icon is on the left side!

I added a couple different icons just to test, but it always shows on the left side. I changed it to the right arrow because it was bugging me.

enter image description here

What I used for code is exactly what's on their site as an example slightly modified.

  wp_nav_menu(array(
    'theme_location'  => 'menu-1',
    'container'       => 'div',
    'container_class' => 'navbar-collapse collapse',
    'container_id'    => 'navcol-1',
    'menu_class'      => 'nav navbar-nav ml-auto',
    'depth'           => 2,
    'echo'            => true,
    'fallback_cb'     => 'WP_Bootstrap_Navwalker::fallback',
    'walker'          => new WP_Bootstrap_Navwalker()
    ));
        ?>

    if ( ! file_exists( get_template_directory() . '/inc/class-wp-bootstrap-navwalker.php' ) ) {
        // File does not exist... return an error.
        return new WP_Error( 'class-wp-bootstrap-navwalker-missing', __( 'It appears the class-wp-bootstrap-navwalker.php file may be missing.', 'wp-bootstrap-navwalker' ) );
    } else {
        // File exists... require it.
        require_once get_template_directory() . '/inc/class-wp-bootstrap-navwalker.php';
    }

    add_action( 'after_setup_theme', 'register_navwalker' );

Anyone ever ran into this or maybe know what I've done wrong?

Solution

  • Looking at the custom walker look like this line is why the icon is first:

    $item_output .= isset( $args->link_before ) ? $args->link_before . $icon_html . $title . $args->link_after : '';

    You could update that to be:

    $item_output .= isset( $args->link_before ) ? $args->link_before . $title . $icon_html . $args->link_after : '';

    But i really think this should be handled via css to position the icon on the right.