Fixing the style of the mobile burger drop down menu in Dreamweaver.
Overview
Daniel Scott
Founder of Bring Your Own Laptop & Chief Instructor
instructorI discovered the world of design as an art student when I stumbled upon a lab full of green & blue iMac G3’s. My initial curiosity around using the computer to create ‘art’ developed into a full-blown passion, eventually leading me to become a digital designer and founder of Bring Your Own Laptop.
Sharing and teaching are a huge part of who I am. As a certified Adobe instructor, I've had the honor of winning multiple Adobe teaching awards at their annual MAX conference. I see Bring Your Own Laptop as the supportive community I wished for when I was first starting out and intimidated by design. Through teaching, I hope to bring others along for the ride and empower my students to bring their stories, labors of love, and art into the world.
True to my Kiwi roots, I've lived in many places, and currently, I reside in Ireland with my wife and kids.
So the first thing we're going to do is a Desktop, it looks kind of fine. At Tablet, needs some work, but it has some real problems down here at Mobile. The biggest one is that, you can see, there's not enough physical room to fit. Kind of okay at the 400, but you can see, when it gets close to here, ended up just trying to occupy the same space. So what I'm going to do is try and shrink this Logo.
So to do it, I'm going to click on the Logo. I'm going to my Sources, now, you will notice that these things just appeared. They weren't in there before. That is from the font that we added from the Adobe Web Edge fonts. So we just ignore these for the rest of the class. So what I want is, in styles.css, I'm going to put it in our Mobile, we're going to create our Selector. And it's kind of guessed exactly what I want. I want to Style this image that is inside an a-tag. The a-tag gives it its link back to Home Page, and inside the Header, which is specifically here. If you've got more than one image in this Header, it's not going to work. You might have to add a Class to it, a very specific one. Maybe the Logo Class, and then Style that, but because I've only got one image inside the Header, this is going to work. Hit 'return'.
What I'm going to say is, 'Width', I'm going to set it to percentage '%'. I'm going to set it to maybe, 80-- it keeps putting double digits in for me. And I complained about that the whole course. So, 83%. Why do I say it's going to be 83? Because I've tested it already. And what that means is that one of the entire width is going to be 80% of its original size. The cool thing about that is, you can see when it gets down here, it's going to keep scaling. Now, most mobile phones aren't going to be smaller than about 320. If you do have mobile phones that are smaller than that it's going to get really small. Am I going to develop a special work around for them? I'm not. I'm just going to say that kind of 300 and above will work, that's most of the cell phones in the world.
Next thing to do is, we'll do it at Tablet first, is that, when I click this, they're not stacking on top of each other. Side by side, you could delete it if you like them side by side, but I want to stack mine on top of each other. So what we do is, under 'styles.css', in our Tablet, we say probably this site in here, 'desktop-view ul li'. We can say, I'd like you to display-- remember, we set the inline block, which got it side by side, block. We'll just put it on top of each other. And we'll add a bit of Padding. Just so that it sits straight on top of each other. Nice! That's it, done for Tablet, what we'll do is, we'll—
You can see, we don't have that Class here in Mobile view so we'll just duplicate it. You can duplicate it, go 'Duplicate into Media Query', and we'll put in the Mobile one as well, so it's in both of them. Nice! Next thing is, the Burger Menu ends up pushing to the left here. And I played around with floating rights, and aligning rights, it just didn't work, what I worked out is that these two are inside this Nav. So, Mobile view and Desktop view Classes inside this Nav, and they can't be inside the same Nav. They just can't occupy the same space. So what we need to do is grab the Mobile. We're doing it in Code view here. We're just going to grab the Mobile Div, or this whole line. Cut it. And above Nav, I'm going to paste it. There it is there, I'm going to delete it. Few empty spaces, so it lines up. It's lost a bit of its styling, it's lost its flavor.
So what we're going to do is, we'll go to styles.css, and we'll say, under Tablet view we'll make one, this Mobile view, and we'll say, flip to the right, please. Give it a second. And that made it work. So, buttons pop out, what I might do, in the Mobile view here I might get all the text to align to the right as well. What I also might do is, it's annoying me that these guys aren't aligning on the right, so I want that Desktop view. So, in Tablet, in Desktop view, I would like you to align to the right. Looks a bit better.
So we've done Tablet view, now we've got to do it for Mobile view. So down here, all those things don't work anymore. So let's do the same things in Mobile. So I'd like the Mobile view to align right. Well actually, float to the right, and the Desktop view, I'd like you to get the text to align to the right. Nice! So we're getting there, right?
One of the last things I might do is that the Padding at the top of this is driving me a little mad. So what is it? This thing here is the Image that's inside my Mobile view. So under 'Tablet', do I have something that will work? Mobile view. It will probably work, let's give it a go. And it just add some margins to the top, drag him out, it does line up. And I'll drag him back and forth. About 8 pixels, so down at Mobile, I'll probably get to do the same thing. Occasionally, these Styles float through the Tablet. On to the Mobile, I'm going to 'Save All'. Preview it in the browser to make sure that's actually true, so looks good there, looks good there. Awesome! I'd say, we are there, and that is a win.
That is how we create a jQuery drop down menu all by our lonesomes. In the next video we'll show you how to copy and paste it and do a little bit of cheating. But aren't you proud of yourself? Did you make it work? If you didn't, remember that at the end of every video I save a version of where I'm at. So depending on where you got stuck you can look on the screen here, somewhere either in the bottom left, or in the comments, there'd be a link to the completed file for that video. So you can compare yours with this one, just see what might have gone wrong. But if you have done it, and you have fixed it, and you have got it working, I am very impressed, because it is very hard. The great thing is, next time you do it you can copy and paste the code you've made yourself.
Well my friends, let's move on to the next tutorial where we just copy and paste it for the people that love cheating.