Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
That way you have a simple way of interacting with the menu on mobile devices. The problem is, right now the menu still looks like a regular menu it's just been squished into a box. Now we need to add some additional styles in our media query. So that we can change the behavior of the menu to suit smaller screens, and that means primarily that we want all the menu items to stack vertically instead of horizontally, and that we want all the sub-menu items to appear at all times. But most of this work can be done with CSS.
So first, let's take a look at what is already happening. I'll go to style.css, and here, you all remember that the menus are under 5.2, so I'll search for 5.2. Here, we have the menu as we built it, and when I scroll down to the bottom of the menu, you'll see there's a small section here called small menu. Here we have the menu toggle as it appears when we're at a larger screen you'll see display is set to none. And then, within the media query that only kicks in for screen widths that are smaller than 600 pixels, the menu toggle is set to display, and our main navigation is set to height.
And if we go back to our existing style sheet, you'll see here we have menu toggle. Main navigation toggle nav menu and main navigation you out. First, I am going to to replace the styles that are in the current style sheet with these ones form the code snippets. What we're doing here is changing the menu toggle button so that it matches the overall design. I'm also using this separate style to change the appearance of the button once it's clicked, so that it's clear that it's been clicked.
And, I'm doing that by adding a border above the menu so you can see a clear separation. And finally, I'm changing the main navigation UL a little bit by adding left of zero. Because in the regular menu, we have a padding left and we need to get rid of it. Now I can save style.css, and go back to my page and reload it. Now I need to scale it down a bit, and here you see now, the menu button matches our overall menu. And when I trigger it, I get a nice line which separates the menu button from the actual menu.
So now we have the menu button working the way we want. The next step is to re-style the entire menu. And here, if you look at the code snippets you'll see I've created new styles for every single element. Because the mobile menu behaves completely differently from the regular menu so every single style has to be overridden. So here I can simply copy out all of these styles and I'll just paste them in here within the media query. Save it. Go back and reload the page. And now when you scale down the size of the window.
You see here we have a proper mobile menu. Each of the menu items lists vertically and they have nice large areas to click on. But there's still a problem. If we scroll down to one of the menu items that has sub-items, you'll see that the drop down effect still happens and that's in spite of our style sheet telling it not to. And this is because of Superfish. Because we're telling Superfish to override any style sheet and add in proper drop-down behavior, so it's doing that even on our mobile menu.
So what's happening here is I'm defining a break point at 600 pixels. I'm still targeting the same area, but then I'm saying; if the document widths, so the width of the entire document is bigger than or equal to the break point of 600, then run Superfish as normal. That means when you load up the page, if your screen is small, you won't load super fish, but if you load up the page in a larger screen, super fish will load. The problem is, we also have to check whether or not the window is being resized, because someone might resize the window and we have to trigger this to happen when the window is resized as well.
So therefore we have a second function that says, on window resize, if the document with is bigger than the break point and the super fiche is currently not enabled, then start Superfish. If on the other hand the document width is smaller than the break point, then run the destroy function on superfish so that superfish disengages. Now I can save superfish settings with these new more conditional statements. Go and reload the page again.
And first I'll reload it in full width and make sure that superfish still works and you can see it does thanks to those delays. Then I'm going to resize my window and open my menu. Ando now you see the drop down elements appear by default, and they're also indented thanks to our styles. So they're easy to navigate. And if I scale back up again, you'll see superfish reengages. Then I have to test what happens if I load up the page from a small screen. So here I've loaded it up from a small screen. And again when I open the menu, it works properly as a mobile menu.
And when I scale up, Superfish engages, and then it will disengage again when I scale down. Then now by combining some media quarries that style the menu for the mobile screen with a custom function for Superfish, we have a fully responsive menu that is also fully accessible and matches our designs.
Get unlimited access to all courses for just $25/month.Become a member
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Your file was successfully uploaded.