menu hover snippet broken in mobile screens

That snipped was altered due to some changes on how code was displayed on themesandco.com. Please try to reapply it now.

I just reported the same thing in the updated Snippet comments but Andrei says he has it working on his test site. But I’m checking the mobile window on a re-sized PC browser window – maybe the reveal arrows work on an actual mobile?

please let me know if this test installation is working for you.

I think I know why it’s not working. Your parent doesn’t seem to have a proper link (#). It’s just a placeholder. My solution referrs to cases when you actually want to preserve the link to a parent page. If you want to use placeholders, you don’t need this snippet.

I looked a bit further into your website. I think a plugin called dropdown-menu-widget is at fault here. Try disabling it and see if it solves your problem.

Thanks for looking into this. I disabled it, but it’s still broken.

Also, looks like your function code adds this line:
<a href="#" class="dropdown-toggle a-caret">
Is that correct?

It does a bit more than just add that.
It replaces this structure:

<a class="dropdown-toggle" data-toggle="dropdown" data-target="#" href="{some_link}">
	{some_page_name}
	<b class="caret"></b>
</a>

with

<a class="a-stripped" href="{some_link}">
	{some_page_name}
</a>
<a href="#" class="dropdown-toggle a-caret" data-toggle="dropdown" data-target="#">
	<b class="caret"></b>
</a>

I basically move data-target and data-toggle from the existing link to a new one that I wrap around the caret. This way the initial anchor regains its link and no longer opens a submenu. The opening of the submenu is done now by the new link, the caret wrapper.

I’m using the same logic as tweeter Bootstrap 3. The guys at tB realized that disabling parent links in menus was a mistake, that was holding people off from using their menus and they have corrected this in Bootstrap 3, by dividing the parent buttons in two areas: link (the text) and caret (the arrow). It’s exactly what I do here. I create an extra link for the caret, so the initial one works as the WordPress menu intended it: a link to a parent page.

Okay, I compared the 2 sites and figured it out. In your snippet, you left off:

data-toggle="dropdown" data-target="#"

so I added that and it works!

full snippet should be:

add_filter('tc_menu_display', 'ccbra_menu_display');
function ccbra_menu_display($output) {
	echo preg_replace('| class="dropdown-toggle" data-toggle="dropdown" data-target="#"(.+?)<b |', ' class="a-stripped" $1</a><a href="#" class="dropdown-toggle a-caret" data-toggle="dropdown" data-target="#"><b ', $output, -1);
	}

Thanks so much for your help. Great theme!

Bingo! Thank you @joshkimmell. Huge thank you @acub (and @andrei). This one has been driving me nuts because I wanted it so much.

It now works perfectly and on all devices and I hereby bestow upon it my official Newbie Gold Rosette? (awarded occasionally to Customizr Snippets which deliver greatly and elegantly enhanced functionality to the original theme AND are easy for newbies to install AND are freely published by very kind people).

Hopefully Andrei will update the original Snippet page.

It looks like I was testing with the initial function and had a broken preg_replace in the snippet. Thanks for searching, finding and pointing that out.

Snippet updated.

Is it possible that this snippet was compromised by the latest theme update – which seems to have confused my 3-bar menu? (That said, I removed the PHP snippet and it didn’t fix my problem.)

Is it possible that this snippet was compromised by the latest theme update – which seems to have confused my 3-bar menu? (That said, I removed the PHP snippet and it didn’t fix my problem.)

Problem seems to be linked to the new Navigation main menu options.

Yes @chappie I have identified the issue too.
Thanks for pointing this.
Bests