dropdown-divider class is duplicated

[gillespieza]

When I run my rendered HTML source code through a validator, it shows that items with the class "dropdown-divider" are getting the class added twice.

Here is an example of my output:
<li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-6731" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-6731 nav-item"><div class="dropdown-divider" title="----" class="dropdown-item dropdown-divider">/</div></li>

The last div is getting class="dropdown-divider" and class="dropdown-item dropdown-divider"

[pattonwebz]

Hey @gillespieza,

Thanks for reporting this. I'll take a look either tonight or tomorrow and see where I need to fix this :)

[pattonwebz]

Hey, sorry for delays. I am not able to reproduce this output. I'm getting:

<li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-1707" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1707 nav-item"><div class="dropdown-divider" title="a divider">a divider</div></li>

Are you using the latest version of the walker? Are my settings the same as yours?

[gillespieza]

I wasn't using the latest version. My apologies. Once I updated, the issue went away.

[pattonwebz]

No apologies necessary, glad you got it fixed :)

[lanort]

I am using the latest version 4.1.0 (just redownloaded again from https://github.com/wp-bootstrap/wp-bootstrap-navwalker/blob/master/class-wp-bootstrap-navwalker.php) and have the same problem.

I embedded the menu with the following code:

<?php wp_nav_menu(array(
    'theme_location' => 'primary',
    'depth' => 0,
    'container' => 'div',
    'container_class'=>'collapse navbar-collapse',
    'container_id'=> 'nav-primary',
    'menu_class'=>'navbar-nav ml-auto',
    'fallback_cb' => 'WP_Bootstrap_Navwalker::fallback',
    'walker' => new WP_Bootstrap_Navwalker(),
)); ?>

Adding a sub-menu item with

• class "dropdown-divider"
• title "-"
• link "#"

results in the following item

<li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-5434" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-5434 nav-item"><div class="dropdown-divider" title="-" class="dropdown-item dropdown-divider">&#8211;</div></li>

As you can see the class is inserted twice

• class="dropdown-divider"
• class="dropdown-item dropdown-divider"

[pattonwebz]

Hey @lanort,

Sorry you are having issues. I can see in your markup that it is duplicated but in my test install it is not and I am not able to recreate this with the latest version from master branch.

The markup that I end up with is:

<li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-1727" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1727 nav-item"><div class="dropdown-divider" title="–">–</div></li>

Is there anything else at all you think might be relevant to help me recreate this issue and fix it?

[lanort]

Thanks @pattonwebz.

Is this the actual source code or already the interpreted one? I think in my browser also only the first class counts and the second one is ignored (this would end up the same as in your result).

However I will check that on another website of mine tomorrow, just to make sure I or another plugin did not mess up anything.

[pattonwebz]

You make a good point, this is likely generated markup. I will check actual source as soon as I am able.

I reopened the ticket since you confirmed this is still an issue. I might have spotted a potential fix for it earlier when scanning the code in my test install.

Let me know what you see in your end, I'll be sure to check proper source on my end as well.

[lanort]

Just tried the current version on another website and it had the same result: <li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-1651" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1651 nav-item"><div class="dropdown-divider" title="-" class="dropdown-item dropdown-divider">&#8211;</div></li>

You can see it here http://neu.derzahn.at

The dropdown-divider was inserted with this data:

The interpreted code has the double class already stripped (but the source code of course still has the double class):

<li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-1651" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1651 nav-item"><div class="dropdown-divider" title="-">–</div></li>

[IanDelMar]

Note: this is still a bug.

The class dropdown-divider is added here

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

Lines 502 to 504 in c856e94

	if ( 'sr-only' !== $link_class ) {
	$atts['class'] .= ' ' . esc_attr( $link_class );
	}

and here

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

Lines 556 to 558 in c856e94

	} elseif ( 'dropdown-divider' === $linkmod_type ) {
	// This is a divider.
	$output .= '<div class="dropdown-divider"' . $attributes . '>';

This is also the case for dropdown-header and dropdown-item-text.