[How-To] Menu parent links hover dropdowns, while keeping mobile support

Requirement: An activated child theme of Customizr.

Code [CSS] (goes in style.css of child theme or in Custom CSS panel under Customiz’it! dashboard page – just press the blue button)

/* This is positioning and display, for keeping both
 * active parent links and mobile support (click only, no hover).
 * Not optional. */
@media (min-width: 980px) {
	ul.nav li.dropdown a.a-caret:hover + ul.dropdown-menu,
	ul.nav li.dropdown ul.dropdown-menu:hover {
		display: block;
	}
}
ul.nav li.dropdown > ul.dropdown-menu {
	padding-top: 10px;
	margin: 0;
}
.nav > li > a.a-caret {
	display: block;
	padding: 8px;
	position: absolute;
	height: 10px;
	width: 10px;
	top: 0;
	left: 10px;
}
.nav > li > a.a-stripped {
	padding: 5px 2px 5px 38px;
}
.navbar .nav .dropdown-toggle .caret {
	margin-top: 4px;
	margin-left: 1px;
}
.navbar .nav > li > .dropdown-menu:before {
	left: 16px;
}
.navbar .nav > li > .dropdown-menu:after {
	left: 17px;
}

/* This is menu styling, it's optional.
 * Don't add if you're happy with how your menu looks.
 * Adds some soft transparency and some fancy inset
 * shadows to ul.dropdown-menu on narrower screens */

.navbar .navbar-inner {
	box-shadow: 0 2px 15px rgba(0,0,0, 0.12);
	}
.navbar .nav > li > .dropdown-menu:before {
	border-bottom: 7px solid rgba(153, 153, 153, 0.27);
	}
.navbar .nav > li > .dropdown-menu:after {
	border-bottom: 6px solid rgba(255,255,255,.9);
	}
ul.dropdown-menu {
	background-color:rgba(255,255,255, .45);
	}
.navbar .nav li.dropdown.open > .dropdown-toggle,
.navbar .nav li.dropdown.active > .dropdown-toggle,
.navbar .nav li.dropdown.open.active > .dropdown-toggle {
	background-color: #ececec;
	border-radius: 4px;
	box-shadow: inset 0 2px 3px rgba(0,0,0,.35);
	}
@media (max-width: 979px) {
	ul.nav li.dropdown.open ul.dropdown-menu  {
		background-color: #ececec;
		border-radius: 4px;
		box-shadow: inset 0 2px 3px rgba(0,0,0,.35);
		}
	}

Code [PhP] (goes in your child theme’s functions.php).

add_filter('tc_menu_display', 'acub_menu_display');
function acub_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);
	}

Note: functions.php of your child theme only contains your personal functions, it should not be a copy of parent’s theme functions.php. When you add a function in the child theme’s functions.php do it just before the ending line, that should contain

?>

and should remain untouched. Make sure you’re not adding functions inside other functions (mind the accolades);

The code, explained
I’m filtering the output of tc_menu_display() and using a preg_replace to pass the class, data-toggle and data-target atributes from .navbar .nav li.dropdown a to a pseudo element I’m adding at replace: .navbar .nav li.dropdown a.a-caret, which is basically a wrapper for b.caret.

I’m also adding class a-stripped to the original link, for CSS targeting. CSS resolves the “2-links where-only-one-was-intended” problem, repositions the caret and tricks the dropdown to stay open when it should. The second part of CSS is styling, optional (adds a bit of transparency to dropdowns on wider screens and a soft shadow on narrower ones).

Enjoy!

@nikeo: I’m pretty sure this needs to be added to FAQ list. There’s been a lot of expectation for it.