Menu: Hover dropdowns + parent links + mobile friendly

⚠️ Code snippets might not be compatible with the latest version of your theme. Always use a child theme to customize your theme, and test your code on a staging website before migrating to production.

Hi,

the following pieces of code change the default behaviour of the Customizr theme menu :

1 displays the dropdown items on hover instead of click

2 enables the click on a parent menu item

It is composed of two parts that work together : a css snippet and a php snippet.

 

Where to copy/paste this code? For the CSS, the simpliest way is to use the Custom CSS section of the customizer option screen. For the PHP part, copy the code in your functions.php file. It is strongly recommended to create a child theme. Everything you need to know about child theme with Customizr here.

 

Demo: ccbra.ro. This mod doesn’t affect the menu color, it will change according to your selected Customizr skin.

Put this in your child theme’s CSS (custom CSS panel or style.css):

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: 1px;
	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;
	}
.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);
	}
.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 (min-width: 980px) {
	ul.nav li.dropdown:hover a.a-caret + ul.dropdown-menu,
	ul.nav li.dropdown a.a-caret:hover + ul.dropdown-menu,
	ul.nav li.dropdown ul.dropdown-menu:hover {
		display: block;
		z-index: 1001;
		}
	}
@media (max-width: 979px) {
	.nav > li > a.a-caret {
		box-shadow: 0 1px 3px rgba(0,0,0,.35);
		height: 12px;
		width: 12px;
		top: 2px;
		left: 8px;
		}
	.nav > li > a.a-stripped {padding-right: 45px; padding-left: 45px;}
	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);
		}
	.dropdown-submenu > a:after {
		border-left-color: transparent;
		border-top-color: #ccc;
		border-width: 5px 5px 0 5px;
		}
	.dropdown-submenu:hover > a:after {
		border-top-color: #fff;
		}
	.dropdown-submenu:hover > a:after {
		border-left-color: transparent;
		}
	ul.nav li.dropdown.open ul.dropdown-menu .dropdown-submenu ul.dropdown-menu {
		background-color: white;
		box-shadow: inset 0 1px 4px rgba(0,0,0,.27);
		display: block;
		position: relative;
		margin-right: 4px;
		bottom: 2px;
		}
	ul.nav li.dropdown.open ul.dropdown-menu .dropdown-submenu:hover > a {
		color: white;
		}
	}

Add this in your child theme’s functions.php:

add_filter('tc_menu_display', 'custom_menu_display');
function custom_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 and style.css are the only files in a child theme that SHOULD NOT BE modified copies of their parent theme counterparts. If unsure, please read about how to create a child theme.

Leave a comment

Your email address will not be published. Required fields are marked *

50 thoughts on “Menu: Hover dropdowns + parent links + mobile friendly”