Dropdown Arrow Overlaps

  • Resolved Gian Faye Paguirigan

    (@gianfaye)


    11 years, 3 months ago

    The issue happens when the current page is a link item on a dropdown menu. The setting is the current page will be selected/highlighted and the dropdown parent of the current page will be automatically expanded on page load.

    I checked the source code and the issue happens because the span with .rm-append-active is rendered twice, so when you click on the arrow it will just change the arrow direction of the 2nd span.rm-append-active.

    <span class="appendLink rm-append-active">▲</span>
<span class="appendLink rm-append-active">▲</span>

    I temporarily added a fix via js to detect the number of span
    with class .rm-append-active and hide the first span. But wouldn’t want to depend on js as a permanent solution for fixing a possible plugin bug.

    Can you assist? Thank you.

    https://wordpress.org/plugins/responsive-menu/

Viewing 3 replies - 1 through 3 (of 3 total)
  • peterfeatherstone

    (@peterfeatherstone)

    11 years, 3 months ago

    Hi gianfye,

    If you have a solution for it please paste the JS so I can add into the main repository.

    The arrows are added by JS so it would be a perfect and permanent solution if you can provide.

    I’ll also give you a shout out on the changelog for fixing the bug!

    Many thanks

    Peter

    Thread Starter Gian Faye Paguirigan

    (@gianfaye)

    11 years, 2 months ago

    Hi Peter,

    Here’s the JS solution using jQuery:

    /* Fix overlap arrows bug on Responsive Menu plugin */
/* span with class 'rm-append-active' is rendered twice when the current page is a link item from a dropdown parent on a menu */
	var $arrowDouble = $('.rm-append-active').length;
/* if span.rm-append-active is rendered twice, hide the first one */
	if ($arrowDouble == 2){
		$('span.rm-append-active:first-of-type').hide();
}

    There’s also a CSS workaround which can be found here:
    http://stackoverflow.com/questions/6447045/css3-selector-first-of-type-with-class-name

    In that case:

    span.rm-append-active ~ span.rm-append-active {
	display: none;
}

    peterfeatherstone

    (@peterfeatherstone)

    11 years, 2 months ago

    Hi Gian,

    Thanks for this.

    I actually have already incorporated this into the 2.5 beta, could you please download and check that all is working as expected?

    Many thanks

    Peter

Viewing 3 replies - 1 through 3 (of 3 total)

The topic ‘Dropdown Arrow Overlaps’ is closed to new replies.