5 - Creating a navigation hamburger menu


Questions & Comments

fred kelly - 8 months ago

hmm not being able to make a burger menu threw me a bit. It doesn't seem that hard to do and I'm here to make a site not grab bits from here and there (google fonts not included). I'll follow your tutorials and see if I can work it out myself.

Administrator Tayla Coman - 8 months ago

I understand what you're saying Fred, however, often in Web we must be time conscious, or as the saying goes "no need to reinvent the wheel".

Kyle Grymek-Nifo - 8 months ago

How come the menu bar isn't showing up even though I've followed this guide perfectly

Administrator Tayla Coman - 8 months ago

Hi Kyle, have you downloaded the completed files and checked the code against eachother?

Administrator Daniel Scott - 5 months ago

Hey Kyle, this has been my fault all along. I've fixed the course files. If you download them again and replace following files with the downloaded versions jquery-1.11.3.min.js,
jquery.slicknav.js & slicknav.css. Sorry for the issue. I checked it and check it and couldn't work it out. Tonight I figured it out. You can download the updated files from here: https://www.dropbox.com/s/623yelw3n5b5n08/How%20to%20code%20exercise%20files.zip?dl=0

Administrator Daniel Scott - 5 months ago

Hey Kyle, this has been my fault all along. I've fixed the course files. If you download them again and replace following files with the downloaded versions jquery-1.11.3.min.js,
jquery.slicknav.js & slicknav.css. Sorry for the issue. I checked it and check it and couldn't work it out. Tonight I figured it out. You can download the updated files from here: https://www.dropbox.com/s/623yelw3n5b5n08/How%20to%20code%20exercise%20files.zip?dl=0

hassan elsamaty - 8 months ago

thank you, but the site stop buffering the videos many times, I had to restart the browser to continue listening.

Administrator Tayla Coman - 8 months ago

Hi Hassan,

Interesting, I've not seen this problem come up before. Was the browser refresh the fix? Have you tried emptying your browser cache?

Leon Tsang - 7 months ago

I followed the video step by step but I still couldn't get the hamburger menu to work. Also, the hamburger menu doesn't work in the final version from the download class files.

Administrator Tayla Coman - 7 months ago

Hi Leon, where are you previewing the completed files?

Leon Tsang - 7 months ago

I previewed it both on Google Chrome and Safari. When I make the Window smaller to the size of mobile view, the burger menu doesn't show.

Administrator Tayla Coman - 7 months ago

Hi Leon, I don't seem to be having the same issue with the burger menu especially when I take it from the completed file. Can you give any more details maybe about how you're hosting the site, is your browser up to date... etc

Administrator Daniel Scott - 5 months ago

Hey Leon, this has been my fault all along. I've fixed the course files. If you download them again and replace following files with the downloaded versions jquery-1.11.3.min.js,
jquery.slicknav.js & slicknav.css. Sorry for the issue. I checked it and check it and couldn't work it out. Tonight I figured it out. You can download the updated files from here: https://www.dropbox.com/s/623yelw3n5b5n08/How%20to%20code%20exercise%20files.zip?dl=0

Anne Carpenter - 7 months ago

I would like my mobile site to have fewer menu items than my desktop site. Would I make 2 separate menus and and use the disply:none; in css?

Administrator Daniel Scott - 7 months ago

I'd create a class around the menu ideas in HTML. Then display:none; in your mobile media query like you suggested. - Dan.

Molly Papier - 7 months ago

Hey Dan, this has happened twice now...I got back into my index.html file & it's got all the code from my styles.css file in it? Did I save something wrong to make this happen?

Administrator Daniel Scott - 7 months ago

To fix this, when you're creating your CSS in the CSS Designer Panel. See the first option in the panel called 'Source'. Change this to Styles.css. It sounds like it set to 'Define in page'. Let me know how you go.

Molly Papier - 7 months ago

Dan, I only get the burger menu, I never see the menu & gray bar? Everything else is working?

Administrator Daniel Scott - 7 months ago

Hmmmm, not sure about this one Molly. What I need to do is enable image sharing in the Q&A. Are you still having the problem?

Administrator Daniel Scott - 5 months ago

Hey Kyle, this has been my fault all along. I've fixed the course files. If you download them again and replace following files with the downloaded versions jquery-1.11.3.min.js,
jquery.slicknav.js & slicknav.css. Sorry for the issue. I checked it and check it and couldn't work it out. Tonight I figured it out. You can download the updated files from here: https://www.dropbox.com/s/623yelw3n5b5n08/How%20to%20code%20exercise%20files.zip?dl=0

joe clancy - 6 months ago

I got the slick nav menu, but when I try to display block for mobile it does not show up? How come? I followed the instructional video.

Administrator Tayla Coman - 6 months ago

Hi Joe, have you checked your code against the completed files?

Morgan Weinfeld - 6 months ago

Hey Tayla, I seem to be having the same problem. I have checked my ccs code against the provided completed code and its a match. I tried switching my Global view to block and my Mobile view to none and that seems to work upon downsizing my browser. Still no luck with Global-none and Mobile-block. Any idea why this may be happening?

Administrator Tayla Coman - 6 months ago

Hi Morgan, could you zip up your site, host it on dropbox and then give me the link so I can check it out?

Molly Papier - 6 months ago

Hey,
I sent my files to be looked at...my hero image never showed up & the text on top of the hero was white? I'll do the entire class again & see if I can find my mistake, but I do think I sent files for someone to look at...? Thanks! I am Molly (vs. my son Joe's name might be showing up)?

Molly Papier - 6 months ago

Hey, I never get that gray bar & the the word 'MENU'...I only get the hamburger menu? I downloaded all the files...so is that it? Have they been updated since this tutorial was made?

Molly Papier - 6 months ago

I never get the the gray bar & word 'MENU'? Are the downloadable files different since this video was created?

Administrator Daniel Scott - 6 months ago

Hey Molly, use the ones I've got in the exercise files rather than the ones downloaded from Slicknav. They may have updated their version. My version can be downloaded from here: https://www.dropbox.com/s/a9a57mb48tbsu0p/How%20to%20code%20exercise%20files.zip?dl=0

Rhett Eshleman - 6 months ago

Same issue as Molly, no grey bar and word "Menu". I downloaded through the link you provided in the reply and the Class File download box. Neither one worked.

Also, my media queries are red. @charset and @media. I have no errors on the screen. I am running the latest version of Creative Cloud.

Administrator Tayla Coman - 6 months ago

Hi Rhett, please zip up your site and send me the Dropbox link so I can check it out. Also: Red for @charset and @media is nothing to worry about, just Adobe's funny color-choice for those specific strings.

Administrator Tayla Coman - 6 months ago

Hi Molly, I can't seem to find your Dropbox link to download your site to fix it. feel free to send it through to me to have a look; tayla@byol.ie. From what I can imagine it's probably a small Javascript change that will need to be done to enable the word "menu" to be shown.

Administrator Daniel Scott - 5 months ago

Ok - there was a fault with one of my files in the exercise file download. I've fixed it now & updated the downloadable 'Class Files'. You can click the button just under the video or use this link here. https://www.dropbox.com/s/623yelw3n5b5n08/How%20to%20code%20exercise%20files.zip?dl=0

Chris Gilbert - 4 months ago

Hey, with my design i have made i have my logo in the middle of the nav bar in desktop view. How do i split the nav bar into 2 so i can put the logo in the middle or do i class it as a list item? i have used the css to float my menu to the right at the minute, how would i put the logo in the middle?

Administrator Tayla Coman - 4 months ago

Hi Chris, can you zip up your site and host it on drop, then share me the link so I can take a look?

Chris Gilbert - 4 months ago

here is the link, You may need to change what to open with because by default my computer has set it to: open with movie player.

https://www.dropbox.com/s/m5i1llr8fijlb9l/broad-skateboarding.zip.zip?dl=0

Administrator Tayla Coman - 4 months ago

Hey Chris, I've essentially done what you're looking for, you'll have to add the exact paddings and positions you want.
https://www.dropbox.com/s/nt4ygk310zmva69/broad-skateboarding%20-%20Copy.zip?dl=0

Chris Gilbert - 4 months ago

thank you for your help

Wendy Bailey - 1 month ago

I'm really enjoying this course and chuffed that I'm starting to understand what responsive websites mean! I've worked on your "Building Responsive Bootstrap Websites" course and managed to make the dropdown menu. I'm working on a website for our local school and, so far, have 8 tabs on my dropdown menu with lots of sub-categories on most of them - I was wondering whether more experienced web designers have a limit on how many dropdown categories you should use? I've always used FrontPage 2003 so I'm well and truly behind the times!!

Administrator Tayla Coman - 1 month ago

Hi Wendy, I think your question of 'how many sub-menus should be the maximum' is a bit hard to answer as my theory is that maybe some use cases require a specified list of drop-downs, but I find that more and more sites are adopting a selector like this: http://www.trademe.co.nz/motors.
In this case they have a place in the main menu for 'Motors', then you come to a selector area which is much less messy than 3,4,5... levels of submenus, so you choose motors which takes you to the motors page, then you choose the make, model, sub-model etc etc. It's a cleaner way to narrow down what the user is looking for, I believe.

Wendy Bailey - 1 month ago

Thanks Tayla, that's really helpful. After looking at the amount of links on the motor site I think mine will be just fine!

Douglas Gillard - 1 month ago

There was no jquery-1.11.3.min.js located on the www.slicknav.js website?the other two were there?

Administrator Tayla Coman - 4 weeks ago

Hi Douglas, the other two files are generic and can be found just by googling them

George Tolias - 5 days ago

Course files are a flop :(

Administrator Tayla Coman - 4 days ago

Hi George, are the links broken for you or are you saying the content of the files aren't working?

ALL ACCESS: $12 per Month + Cancel anytime   

Video Transcription

Hi there, in this video we're going to look to make a responsive navigation. So, at the top here, on the right, on my desktop view, the navigation is 3-buttons, and it's stacked like this, but tablet, it drops down to be underneath, and the big one, is when it's a mobile. It turns into this bigger menu. So, we're going to look to do that.


Now, what we're not going to do is, we're not going to open up a Javascript file, and start kind of hand coding everything. What we're going to do is leverage a lot, in particular, one specific thing that's already been made. There's lots of different people  who have made cool little reusable bits of code that we get to use, and just go and restyle, because, although it would be nice to do it all from scratch, if I'm honest, if I've ever gone through and made a nav-sandwich by myself? No I haven't. I go off, and stand on the shoulders of giants, and find snippets that I get to use when I style. They have a lot of them, but I'm using the underlined kind of basis of their work.

Now, there's a bunch of different ones. What's the language to use? Say, like the one that I use here. You want to start with something different. I'm looking for a jquery nav-sandwich. If you're going to search for that, you will find lots. I found this one, it's the one that I use loads. It's really simple, it's really easy, it's really easy to style. I like it. It's this one here, let me pull this up. It's this one here, called slicknav, by Josh Cope. Thank goodness for Josh! He's made a super easy nav-sandwich that we get to kind of use in ‘style’, and it's got pretty good documentations.

So, first of all, you can do one of two things. If you've downloaded the exercise files, and I've got the bits you need in there, but if you’re just kind of watching the video, you can download the files that you're going to need, stick them on to your desktop, or stick them somewhere, and open these. Have a look. It's there.  There's a zip file, open them up, and here's bits of documentation, and the stuff you need. This is probably the only bit that is a little hard for people that are brand new. If you know what you're doing, this is great, but if you don't, there's a lot of stuff in here. Actually, all you really need is, if you open up distribution here, you need this thing, and this thing, mainly. Those two files, plus a little bit of text from here. So let's go through and do that ourselves.

So, if you're following along with my files, and open up the 'How to code' exercise files, and what we're looking for, I want you to grab this, this, this. These three files are going to help make it work. Let's hit 'copy'. And remember, we're going to go to our desktop, open up 'dans-portfolio'. Remember, everything for our site, all files, images, these bit of codes included, needs to be inside this folder. Now I'm going to push it in here, into the folder here. If you're going to be real nice about it, you should have a css folder, and a Javascript folder, and put everything, ‘css’, into that, and ‘Javascipt’ into that. We're not going through for this one. We’re always going to keep it super simple, and just lump them all in the bottom here, because this is not going to be a particularly big site. So, as part of it, we've got this slicknav, and we've got this thing here, this bit of jquery that Josh has written, and this is the library it kind of refers to, so you need all three of these to make it work. So let's go and grab the code we need to make it work.

If you go to the website slicknav.com, it's got it here. I've saved it as well in the exercise files. Let's check it out. Exercise files, desktop, code. There's this one here called the navigation code. If you open that up, it's there. There’s this bit, and this bit. We're going to grab this bit first, copy it. And we're going to put it into the Dreamweaver. And we're going to replace 'Hello World' - That was great, we loved it, it was helpful, but not a whole website. So, we're going to paste this in, and just to be pretty, we're going to tab it across, so that's inside there. I use these tabs to show who's inside what. Let's save it. It's not working yet. Don't get too carried away, or too upset when it doesn't work. Let's preview it in a browser, and we'll see what we got here. 

So here's my site here. That's all that it is. Some list items, and you can see, if I change these list items now, if I change this to portfolio, and 'save'. Jump out here, you can see that's what we're doing. So that's going to be our navigation. So, that's the first part. We’ve copied this bit of code in. Next bit of code to paste in, is this stuff here. This bit of Javascript here, we're going to copy it , and we're going to put-- and where is this code? This code is just before the closing of the body. 

All Javascript goes down the bottom here. You know it's Javascript, or you don't know it's Javascript, but generally if there's a tag called script, they mean Javascript, and it always goes down the bottom here, and you just got to kind of push it down the bottom side, don't delete it. You stay down there. 

I’m just closing my body text, ‘return’s don't mean anything in codes, but it just keeps them separate. Now, what we'll find is, nothing's actually working yet, let's jump and have a look. Nothing's working yet, so it's part of the things, we'll paste that in, we've pasted this in. The next thing we need to do is we need to link those files. We copy them into our hard drive, the css, and the Javascript, we haven't linked to them. Let's do that. First of all, let's link to the css that Josh made. So, ‘link’, then ‘tab’, then if I start using slicknav, there it is, ‘.css’. Great! That's one part, and next I need to link to those two Javascript files, and we're going to do it here. Remember, Javascript goes down the bottom, and we're going to go ‘script’, and in this case, we're going to go source, ‘src’, and we're going to go-- there it is now, nice. 

Link your Dream Weaver, add these two of them assigned, you do that one first, and then I’m going to close that off, and then when you put in the closing for it there, so we've got our script source for that jquery for slicknav.js, and now we're doing to do the same thing for-- I'm just going to copy, and paste that. Paste it there. Make sure my tabs are lined up. I'm going to make these all line up as well, just because-- there's no real reason, but it looks-- all of that, when everything's lining up makes it easy for a visual person like myself to see. So, let's delete this one, and let's put in the other one, which was jquery. There it is there. 

So, those two, both need to be there. Let's hit 'save', and now let's go and have a look. Fingers crossed. It doesn't work, looks exactly as it did before. And I know why. Let's go back into Dream Weaver. When you're putting in this Javascript at the bottom, make sure that this one here, the ‘jquery1.11.3.min’ is at the top. This thing here is the thing that Josh has created. And it references this library here, above it. If this thing appears first, it can't read below itself. This needs to be above, and that one underneath. So, that should work now. Let's hit 'save'. Let's jump out and have a look. 

Hey, that isn't working. It may not look like it, but that is the kind of bare bones here, so the slicknav installation-- this is, if you’re good till here, you've won. We're going to go off and style it obviously, to make it look like we want. If you want to start with something different, if you have a look at slicknav, there's lots of different ways of kind of getting it started with. We've started with this basic demo here, but there’s ways of using-- we've just used the basic code, and you can see here, these are nice bouncy ones with all sorts of other drop downs, so if you want to go a bit more hard core into this, start with this HTML, and this Javascript, rather than the one that I've given you.

So, let's go through and have a little look. So, those drop down menu, and these things are same. Now, what we need to do next is we want to see the navigation only when it's down at mobile view. And this thing here, we want to see a tablet, and desktop. That's what I'll show you here. So, this is that line, styled. It's quite here. And we see him here, desktop, we see him here, tablet, and we don't see him at navigation. What happens is, we only see this nav-sandwich, which is, this guy. We're going to delete the word ‘menu’, but we only see that in mobile, and we see this in tablet, and desktop. So, let's go and do that with our css.

So what we need to do is we need to play around with our media queries, so let's have a look at-- first of all, let’s look at the slicknav now. I've had a look at this for you, and it's pretty good instructions, but they're really for somebody who already know what they're doing.  They’re good for me, but if you're really brand new, and you're a graphic designer, it's got to be a little tough, but what I've worked up, is that, I need this guy here, this thing called ‘slicknav_menu’, and this thing here, we're going to copy it, and you can just type yours in. 

We're going to Dream Weaver, and what we're going to do is we're going to go enter our styles. What we’re going to say, at desktop, I would like this thing called slicknav menu, and I have just played around and I've worked out this.  Slicknav menu is the name given to this box here, that little stripy line.

So, there are three that stack next to eachother, I just call 'menu'. So that's the name for these. They're called menu, and this is called slicknav menu. So, slicknav menu, what I'd like to do is-- put in curly braces '{ }'. And I'd like to do something called ‘display’. And I'd like to say, weirdly block I'd like to say, 'none'.  They always taught me when I started.  Block feels like the same as none, like, block, and don’t be in here. Block means, display it like a big block of, I don't know, wood, that's how I remember it anyway. So, I want to say, when I'm at desktop view, I would like the stripy menu here, add to display, 'none'. I don't want you to appear at all, please, semicolon, ';'. Okay, ‘save’. So, let's go look at our menu, let's look at the right one, it's kind of here. Great! 

So, at desktop, he doesn't display. At the moment though, he doesn’t display tablet, or a mobile. We're going to ignore this stuff at the moment. But, it's kind of working. It's still what we said, 'Do not display on desktop'. And what happens is, this one here flows down, and because nothing contradicts it into tablet, or mobile, and yes, it stays 'none' the whole time. 

So, what we need to do is-- actually what we'll do is, just to tidy this up, this 'h1's here, we used this color just to test earlier on, then we just used it to change the color of my heading, just that we understood what these media queries were, and how they worked. For the moment, we just have a really nice tidy one, there's desktop. And also, while I’m here, 'Desktop/Global'. People will call this 'global', this top one, and anything that overrides it, will be, in our case, tablet or mobile, but if somebody says, 'Put it in global,' they mean the top chunk. It might not be desktop, you might be dealing with, what's called mobile first. You go to your mobile, instead of your desktop at the top, but that's called global at the top there. Great!

I got a little lost, but what we need to do is, we're going to copy this whole chunk, so, 'desktop, don't display'. And tablet though, unlike display, 'block'. And, let's go and check it out. Actually, I don't want to do that, do I? I want it to be off on tablet, because my little menu, actually my mock-up in Photoshop has it off there as well. And that's on your mobile. I go here, and I ‘block’ it. Let's say 'save', let's have a look.

So, desktop, not there, tablet, not there, mobile, hello, okay. And it's that easy, kind of. So, just turned it off. The nice thing about this bit of menu that slicknav has built, is that these are tied together, so when I change, you can see, I'm here, I don't have—just this one, 'Portfolio'. So if I change this one, and I go to 'Contact me', in here. You see, that's connected to this one here. They're all the same, but displayed twice. And all we need to do is to decide which display to show.

We've done it for the mobile one, and that works. So, it's one of the bigger menus. So, bigger menu for mobile, not for tablet, not for desktop. Let's deal with this one. So I wanted it to appear for desktop, I'd like it to appear for tablet, but when it gets on a mobile, I want you to go away, because that's going to be the menu.

And this menu is called, ‘menu’. So we're going to go to my 'styles', and what I'd like to do is when I get down to mobile view, I'd like to say ‘#menu’, and you might have noticed that we've been using full stops for these things to describe them. Sometimes we don't, sometimes we have hashes. We're just following the lead from the person who made the slicknav. This is called class, and this here is called an ID. And classes have periods in front of them, the full stops, and IDs have hashes. How do I know that's an ID? Couple of things. Easiest way was in his instructions. There it is there. It says '#menu'. And I can see it there. And I can see it has the ID of menu. 

 

So, these ID, or menu, I'd like to put in our curly braces '{ }'. And I'd like you to do something called 'display'. And this one here is going to be 'block', no, 'none'. I get confused. So, I don't want the menu to appear on mobile.  So let's go and have a look. We go to our preview, and this one here. So, desktop, tablet, mobile.   Little line turns off, and he turns on. So, at mobile, what happens, slicknav menu turns on. And, menu turns off. Lovely! Make it more lined up. Let's hit 'save'.

So, that's it to get kind of real basics going. Now, we're going to go for the style, because it's looking a little bit plain Jane, we want to make it look like our mobile designs. So, let's go ahead and do that in the next video...

ALL ACCESS: $12 per Month + Cancel anytime