Responsive Navigation Module

By shane
Thu, 2014-04-10 07:22
8 comments
Daily Dose of Drupal Episode #142

Share with Others

In this episode of the Daily Dose of Drupal we go over the Responsive Navigation module. This module can be used to make your Drupal menu "responsive" so that it displays nicely on mobile and tablet devices. If you are trying to build a responsive Drupal website or a responsive Drupal theme, this module can help.

Hello everyone and welcome to another Daily Dose of Drupal, today we’re on Episode number 142 and actually lately it’s been more like a monthly dose of Drupal but anyways, today we’re going to be covering the Responsive Navigation Module on drupal.org. It’s a relatively new module but it allows you to make a simple menu in Drupal a little bit more responsive.

So if you take a look it uses the J Query plug-in called “Responsive Nav” so if you look at the menu up here you’ll notice as I scroll or make the actual size of the browser smaller it turns into a little menu icon that you can click and now you have a responsive navigation menu.

So this module allows you to do that and we’re going to go ahead and get started but before we do, as always I’m Shane Thomas, you can follow me on Twitter at smthomas3, also make sure to stop over at codekarate.com and sign up for the newsletter if you haven’t already and become a Code Karate supporter. So I’ve already downloaded the Responsive Navigation module and along with that you’ll need the libraries module on drupal.org and also the Responsive Navigation plug-in which you can find at responsive-nav.com, so also a Drush command you can run.

All of these information can be found inside the Responsive Navigation Modules install.txt. It has instructions on how to install the plug-in if you’re not sure and also how to install the module but assuming you have all that set up we’re going to go ahead and get started. There is a configuration page for the Responsive Navigation Module, I’ll go ahead and hop into that. All it allows you to do is select how many Responsive Navigation blocks you want. In this case you can either have 1 or 0. It does say that the Responsive Navigation plug-in only currently allows you to have one Responsive Navigation menu on the page.

So I’m going to go ahead and save this but it’s just set to the default. Now we can go ahead and add this menu block wherever we want on our site. So just as an example, it’s called The Responsive Navigation 1, I’m going to drag it into one of the first columns, I’ll just go ahead and say it underneath the Search form, under sidebar first and I will save this and then I will go ahead and click configure on this block and I’m going to select which menu I want to use and I will go ahead and just select the Main Menu, you can select the Menu Depth, I’ll go 0 so I’ll just use this top level, I want to hide the Block Title so I’ll go None, you can also then change some settings if you want to animate it, if you want a transition.

This is the label of what the Responsive link turns into whether you want to insert it before or after the actual navigation and a couple of other different other settings, we’ll go ahead and click Save here and then come back to the homepage. I did not set that correctly here, I’m going to change that. It should be None not Node, so I’ll save it and so I have this little menu here.

Now as I scroll down you’ll notice this changes into just a menu link and as you can see it’s not necessarily powerful here but if you were to move it into the header region or something like that it can become a lot more powerful.

So I’m going to just do a few things here and move it up into the header and one thing you will need is you’re going to need to be able to CSS this so it will be good to have some familiarity with media queries with your CSS to make the site fully responsive and not just the menu. But let’s assume I had this going across rather than down then when the site hit a specific media query breakpoint I could then … you can see it’s not responsive right … this side is not responsive out of the box but it does … if I can get it away from that edit link you can see it does work as far as allowing you to drop down the menu and drop hint, slide it up and down based on you actually clicking the button.

You can CSS this however you want to obviously look similar to how this site works, the Responsive-Nav site. If you want it to, it’s a really simple to get it started, it takes a little more to get it to this CSS and looked correct or the way you want it or you can read the read-me file, it tells you a little bit of information, you can also look at some of the examples that come with the plug-in itself for how to actually style it and how to make it look and work correctly or nicely.

So that’s really all there is to getting the basics started with the Responsive Navigation Module. Go ahead and take a look at some of the CSS examples and get it to work and look the way you want to on your Drupal website. So that’s it for this time on the Daily Dose of Drupal and we’ll be back again next time for something new. See you later.

Comments

It's a cool module. However if you would like to have a hands on approach then this is your cup of tea but if you would really like to have responsive menus go with modules such as super-fish and themes such like responsive Bartik as an example.
All in all good work Shane. Keep it up.
Cheers.

Hi Shane,
Love your videos. This is a nice module for a drupal site builder but not for the themer. From the themer point of view Media quires should be written to work according to the responsive set standard. If we make the menu responsive and later on make the full site responsive then their might be compatibility issues. Although, its a good effort.

Tarun -
Hey it's Adam (the new guy). Appreciate the post. As a themer I would agree with you that this module isn't the "best" way to handle responsive menus. Only other point would be that sometimes it is nice to have it work out of the box, especially if you're working with an already responsive theme or in need of a quick out of the box option. What types of responsive breakpoints do you use?

Hi Adam,
I am using the following break points.

@media only screen and (min-width: 768px) {
/* tablets and desktop */
}

@media only screen and (max-width: 767px) {
/* phones */
}

@media only screen and (max-width: 767px) and (orientation: portrait) {
/* portrait phones */
}

Anyway I sorted out by applying the media quires for the complete theme.

Thanks for the reply.

Post new comment