Making Nice Menus Responsive In Drupal 8

March 20th, 2019  | Categories: Drupal, Drupal 8, IPad/IPhone, JQuery

PROBLEM
I highly recommend Nice Menus for Drupal. I’ve been using it for years and it makes things pretty simple. It’s easy to style over to what you need plus it’s keyboard accessible (which is the huge one)!

Anyway, as far as mobile-friendly/responsive goes, Nice Menus is not. It lacks in that department.

So how do we style it? How do we make it a hamburger menu?

SOLUTION
Turn off nice menus! It kinda sucks, but you need to do it in order to put things into your menu template and create mobile-friendly design.

First, to turn off nice menus, put something like this in a JS file (which DOES use JQuery so be careful; that’s another post for another day):

// we only need to do stuff if it's on mobile
if ($(window).width() < 770) {
	// let's remove the nice menus on resolutions that are 768 and lower
	$("ul.office_main_top_level").removeClass("nice-menu");
	$("ul.office_main_top_level").removeClass("nice-menu-acf-main-navigation");
	$("ul.office_main_top_level").removeClass("nice-menu-down");
	$("ul.office_main_top_level").removeClass("sf-js-enabled");
	$("ul.office_main_top_level").removeClass("sf-arrows");
	$("ul.office_main_top_level").removeClass("nice-menus-processed");
}

Removing those classes will turn off the JavaScript that’s happening with Nice Menus for keyboard accessibility, styles, etc.

Now add something like this to your template at the top (but outside the first ul):

<a href="javascript: void(0);" id="office_main_nav_hamburger"><i class="fa fa-bars"></i><span class="hide">Expand</span></a>

(I’m using Font Awesome for icons.)

Add this after the links in the lis (only if they have children):

<a href="javascript: void(0);" class="expand_link"><i class="fa fa-angle-down"></i><span class="hide">Expand</span></a>

Add some more stuff to your JS file (I did it inside the if window statement above):

$("#office_main_nav_hamburger", context).click(function() {
	$("ul.office_main_top_level").toggle();
	$("#office_main_nav_hamburger i").toggleClass("fa-times fa-bars");
});

$(".expand_link", context).click(function() {
	$(this).closest("li").children("ul.office_main_sub_level").toggleClass("expand_sub_level_mobile");
	$(this).children("i").toggleClass("fa-angle-down fa-angle-up");
});

I won’t walk you through all the CSS but at least now you may have a understanding of how to make Nice Menu’s responsive.

No comments yet.

TOP