4.3 Styling the Off-Canvas Navigation

In the previous lesson, we styled the main navigation up to a point where it looks exactly as it should on large screens. Now we have to apply styling for smaller screen sizes and we'll start with a tablet size. Let's check it out. And by the way, if you're wondering how I'm seeing this, it's the responsive, or the device toolbar from the Chrome developer tools. Very easy, you can switch between different sizes, mobile, tablet, large desktops, really easy for debugging. Okay, well, on smaller screens there are a couple of things that we need to do. According to our sketch file, the main navigation just disappears completely, the logo is centered and also we have this hamburger menu icon. So let's go ahead and do that. Let's go back to our navigation, top-bar and inside top-bar we're gonna say include. So this is very cool, this is a breakpoint, the breakpoint mixin from Foundation. And any code that I write in here will be applied, in this case, to top-bar, but it will be applied only when the media query condition is met. Which in this case, is when I'm dealing with the screen the size medium and below. Very nice. So in here what exactly do I want? Well I want first of all a smaller padding. So by default the padding is 4rems while in here I just want a padding of 1rem. And then, I want to hide my main navigation completely. So I'm gonna say top-bar-right and we're gonna set display to none. So that will hide that navigation completely. Next up, I want the top-bar-left, which contains our logo and our hamburger menu icon to span the entire width of my page, so I'm gonna say width 100%. I want to text-align: center, so align the text in the center. So let's see how that looks like. But I want this hamburger menu icon to be placed to the left. And also, I want it to be aligned vertically with my logo. Well, a foundation actually comes to our aid here because it's mostly based on Flexbox. So we can use Flexbox to align these elements accordingly. Now, what I'm gonna do is say display flex It's gonna align elements to the left. And then what I can do is target the logo. So let's actually have a look at what we have here. Yeah, we have an ap-hamburger-container, we have an ap-top-logo, so we're on target, ap-top-logo and ap-hamburger-container. And I'm gonna set flex 1, and display flex. So that will basically divide this space into two equal areas. And it's gonna align those elements to the edges of those areas. But the problem is, this logo is not perfectly centered, because we basically have two areas here. To center it, we need to add a third area. So to do that, I'm gonna go back to my top-bar, HTML here, and I'm simply gonna add a div with a class of ap-flex-filler. Just like that, and now what I can do is add that ap-flex-filler right here. And that will position the elements accordingly. We now have three areas of equal size. So now what I can do is, I can target my logo, ap-top-logo and I can say justify-content: center and that will align it nicely in the middle. Now, let's see about this hamburger menu icon. Over here, I'm gonna delete this text because we included, I don't know if I showed you this or not. I don't think I did, let's see. So what I did was I downloaded the ionicons font and I simply imported it via SASS. So now whenever the browser finds an i with a class of icon, it looks to that font and retrieves the correct graphic. Now, currently, this hamburger menu icon doesn't sit very well, it needs to sit right in the middle, right? And if you remember from Sketch, this is actually a button that's 45 by 45, with that symbol aligned in the center. So let's make a button out of it. We need to target this ap-button-icon. So we're gonna go back to our typography because we're dealing with an anchor tag and I'm gonna go right here and I'm gonna say the anchor tag with the class of ap-button-icon, we'll give it a height of 4rems. We'll give it a width of 4rems. We'll set its font size to 1.5rems. How's it looking so far? Okay, that's better. And then we also have this class of ap-small. And that is used to differentiate the button icons from the header, to the ones in the footer, the social media ones. So for those with the class of ap-small, the height will be 3rems and the width will be 3rems which is equal to 48 pixels. And then, I'm gonna simply target the i element, and I'm going to extend ap-center-both. Now let's see if that works, perfect. Ap-center-both is a utility that I created, that basically sets a position absolute, top and left to 50% and transform translate minus 50% on both axes. This is a very quick hack, or a very quick method, for vertically and horizontally centering an item inside its parent. Okay, now, let's see what happens if I open the off-canvas menu. For the off-canvas will slide from the left. We need to add a little bit of styling to both the body and the off-canvas element itself and of course the links. If we take a look back at our sketch document, let's see. So the body should basically have an overlay of black 50 when the off-canvas is visible. The off-canvas doesn't have any kind of shadow. It's white, it has a padding top of 75 pixels. That's about, what, 5rems, and also, the links are 100% and they have this border bottom to them. So let's begin by changing some of the default settings for the off-canvas elements. Let's go to settings, let's see, off-canvas. There's a bunch of stuff that we can change to the off-canvas element, so let's go ahead and copy all of them. And we'll see what we need and what we don't need. So let's see,off-canvas size, not really. Actually, we just need the background. We gotta change that to ap-white, inner-shadow-size, we're gonna use this to reset the shadow. So set that to 0. And let's see the exit-background. This is the background of the main content when the off-canvas is visible. We're gonna change that to ap-black-50 and that's pretty much it really. There are a couple of more things you can change from here, but for what we need, these are more than enough. Okay, so off-canvas-background, inner-shadow-size and accent-background. So now, we go from that to that, perfect. But also, the shadow, I don't think the shadow disappeared. And also, the content doesn't scroll to the right, or it doesn't move to the right along with the off-canvas. So let's see, did we get something wrong in the code. Let's check out the default template here. So we have off-canvas position-left, that's correct. Id data-off-canvas, good. And then div class off-canvas-content. We're missing something here. Data-off-canvas-content, okay, we need to add that as well. Let’s check out the other, okay, so the other lay outs have a data-off-canvas-content here and also page data-off-canvas-content. Okay, yeah, sorry, my bad, I forgot to add that thing there. And now if we do a refresh, yeah, there we go. So the content will move to the right and also that shadow is now gone. Now, let's move this off-canvas-navigation down by 5rems. So we are gonna go to our, let's see navigation, navigation SCSS and we're gonna target off-canvas, we're gonna set that padding top 5rems, just like that. Perfect, and now the only thing that's left to do is style these links. And to do that, this is actually a drilldown menu, if you remember. So we need to style the drilldown menu elements. First of all, let's get rid of these arrows, we're gonna add our own. So I'm gonna go to Settings, my own settings, and I'm gonna set drilldown arrows to false. Okay next, let's go to typography. Right here, and I'm gonna say drilldown, list item anchor tag. And also we're gonna target the submenu ones, so drilldown is drilldown-submenu, anchor tag. We're gonna set their widths to 100%, and we're gonna set the padding to 1rem on the top, 4rems on the side because I want to have room for that arrow. 1rem, again, on the bottom and 2rems on the left. And finally, we're gonna say border-bottom 1px solid ap-black 05. Let's have a quick look, okay, perfect. Now, please disregard the slight orange tint, apparently this is just in Chrome. If we take a look at this on a mobile device, it's not there. Okay, what else? Let's see if we check out the submenus, they work perfectly. But it's time to add these icons, these arrows, to the right, on the items that have submenus and to the left on the back submenu. So to do that, I'm gonna target again, drilldown. And is drilldown-sub menu-parent. This is the list item that we're gonna apply, an after pseudo element. So we're gonna target after. And then also drilldown, .js-drilldown-back. This is a class that's applied to that back element, and we need to target it so that we can add an arrow. This time, we'll use a before element. So for these two elements I want a very small text, so I'm gonna extend one of my utility classes, ap-super-small text. And also I want these to have the font family of ion icons. So I'm gonna extend ap-ionicons and if I'm gonna show you the utilities really quick, this is the ionicons class. It just sets font-family, font-size, and font-weight. And the super small text just sets the font-size to the super-small-font-size, which is around here 0.65rems. Okay, so I laid the basis there. Now what we need to do is target this first element. I'm simply gonna set the content to f12.5. And I got this from the official website of ionicons. I'm gonna set it right of two ends. And I'm gonna align it in the center vertically. So I'm gonna extend: ap-center-vertically. Again, this is one of my utility classes. And that is doing, let's see, setting the position absolute, top 50% and then moving it back with a transform. Okay, so once I do that, we have arrows. Let's do the same for the back link, yeah, I'm gonna copy that one, and inside I'm gonna set the content to f124. I'm gonna align it a little bit different this time. I'm gonna set display to inline-block. Because it's right next to the text I can do vertical-align middle. I can say margin-right of 0.75rems to distance it a little bit from the text. Let's check it out, okay, and I'm just gonna set a margin-top of -2 pixels just to push it up by 2 pixels. Okay, perfect, and that is the off-canvas menu and the main-menu complete. Let's also see this in a smaller screen. Yep, works perfectly. All right, we're gonna wrap up this lesson right here. In the next lesson, we're gonna try and style the rest of the homepage. I'll see you there.