Styling the Mobile Navigation

[00:00:00]
>> Kevin Powell: So with that done, we've added or updated our HTML, so we can actually come over to our source control and just say, addedhamburger button, and we can just stage that change and commit that. Just again, it's a good practice, every smaller change you're doing, you can commit these smaller changes.

[00:00:21]
We can sync those changes so they're saved and then continue working, just so you don't have one commit that has everything. So if ever you do need to go backwards, it's easier to find the different steps along the way. And with that done, we can now think about styling the navigation.

[00:00:35]
Because we have our button there, does not look fantastic, but at least we can start getting the mobile nav version of it done. So I can jump back over to my style sheet and I can come up and find the right component. You could probably just do a search, it would be faster, but I can find that primary navigation right here.

[00:00:51]
As I mentioned a lot earlier, this is one of the very few cases where I actually use a max width media query or a desktop first approach, because this is all the CSS I need for this to work. And I think one thing I actually forgot earlier, so we can do it really quickly now is a link of text decoration of none just to get rid of the underlines on those.

[00:01:17]
And yeah, that's all the styling I need for my navigation at larger screen sizes, I don't have to make any changes to it. But on mobile sizes, I need a lot more code, and I don't wanna have to revert back to what I was doing before. So for this, I'm gonna come in here with an app media, and I'm gonna do a width is less than 760 pixels this time, instead of larger than.

[00:01:42]
Of course, this would also be if you're using the older syntax, this would be coming in with doing a max width media query instead of the min width one. So we're only targeting small screens. I just find this as a much simpler approach, path of least resistance. I don't have to rewrite or overwrite things, I can just add the styling in where I need that styling to exist, because we do need to completely change things.

[00:02:03]
For example, in here, I can choose that URL, and we can do a list of flex direction. Flex direction is going to be column now, and they're gonna stack on top of each other instead, which is one of the changes that we need to do. At this stage, it just looking at the design itself, there's nothing too complicated that we need to do.

[00:02:30]
It's all the way over if you're looking in the figma file. All the way on the right, we do have generally what we want to style it as. So the hamburger is gonna stay there, we need a green background, pump up the font sizes, add those little separator lines in there.

[00:02:43]
So what I might try and do, let's see if I can get this to squeeze down at the bottom. So my UL, or actually not even that one. My primary navigation itself at this stage, cuz if we come and take a look here, I changed my flex-direction on the UL.

[00:02:57]
But most of the styling for this actually should be on the primary nav cuz this is what we're gonna be turning on and off and our list is inside of there. So because of that, if I come on inside of here, if we just look at the nesting, and this is where nesting sometimes you just have to pay attention to.

[00:03:12]
So primary navigation, that would be like right here. If I do background red, you can see the primary, it's getting the red background on there. CSS, if ever you struggle with knowing what's going on, add a background or a border. Everything is boxes, it can be really useful just to see where it is if you're running into problems.

[00:03:32]
And if it's not showing up, put the background somewhere else. In this case, we want a background, so we might as well leave that color is the accent-main.
>> Kevin Powell: So we can put that on there, we need quite a bit of padding.
>> Kevin Powell: And I can see that it's not like glued to the top corner of the page, I also know it's gonna have to close/open.

[00:03:58]
I eventually wanna build an animation into there as well. So because of all of that, and the syntax highlighting has gotten a little weird in VS code, because of the nested media query. Sometimes it just fixes itself, so I do apologize for that. So if you prefer, you can always move it out if you don't like the broken syntax highlighting.

[00:04:16]
I'm going to do a position absolute, because that's gonna make my life easier, plus the positioning of the button fixes itself in doing that. And then I can say a top of 0 and a right of 0 to get it off into the corner right there. The font size I mentioned needs to be bigger, I'm gonna go with my font size large, and adjust it from there.

[00:04:43]
Because we also need the font weight to be pulled the font family to be the font family heading, and this needs a var on it. And hit Save, and just see where things are looking. They're not too bad actually, I'm pretty happy with how that's looking right now.

[00:05:07]
One problem is I've lost my button, we'll fix that in a little bit. But for now, I think the last thing I wanna do, I have a border radius that's only in the bottom left over here. So the easiest way to do that, you could select that specific corner I always, I don't know why I don't like the long hand of border radius.

[00:05:26]
So I do it the hard way. Border radius 000, and then order radius three. It's a little bit silly to zero all of them, so if you prefer the long hand for there, it's fine. For whatever reason, I always do it this way, so I'm gonna keep doing it that way.

[00:05:50]
So looking at this, I'm pretty happy with how it looks, but we do need these separators, and we need to adjust the spacing. And right now that spacing is coming from the UL here. If you start adding spacing into something, and then you run into like issues or problems with it, just go back to what you had, but just try and figure out where the initial spacing is coming from and just using your inspect is always the easiest way to do that.

[00:06:11]
And very easily, if it's coming from gap, it's always gonna show the gap in this, like dark purple with lines shooting through, at least in Chrome. I know Firefox shows gap differently as well, I'm not sure about Safari. But see this way, you know right away is it a gap from something, or is it a margin on something?

[00:06:28]
Because you might forget where your added spacing or made spacing things, so just finding out where that is is a good thing. Because in this case, now that I remember that it's coming from the gap, I'm actually gonna come on the UL and say gap is 0 to bring them as close as possible together just because I need to add those white lines in there.

[00:06:46]
And if I had gaps, it would be really awkward to try and figure out where that spacing on those white lines is actually coming from.
>> Kevin Powell: To add in those lines, the easiest thing, in my opinion, actually I was gonna do something more complicated when I was seeing the easiest thing I could think of.

[00:07:05]
Let's come in and just choose our list items, and we're gonna do a twist on the lobotomized owl. The lobotomized owl is the star plus star. We can do a star plus or LI plus LI, which is effectively the same thing. So if I said color here, that's not gonna work for color, background is red.

[00:07:24]
The second and the third one get the background that's red. The first one doesn't just, instead of star plus star, we're using the li + li just cuz I wanna specifically only choose my list items. Yes.
>> Speaker 2: Can we use anchor position to fix the menu to the button instead of position absolute.

[00:07:44]
>> Kevin Powell: We could definitely use anchor positioning, I'm a huge fan of anchor positioning. Right now if you wanted it to grow out of the button, it would probably be the easiest way to do it. But the browser support for it's not fantastic yet, the poly fill for it's actually okay.

[00:08:00]
It's not fully featured, cuz they paused work on the polyfill for a while, because the syntax was getting updated for how anchor positioning works. That's all been settled, and I'm pretty sure they've started work on othe polyfill again. But for what we're doing in this, using the polyfill, cuz you could do it with some of the simple stuff that it's able to do, you could definitely use anchor positioning, but for this just to make sure we have good browser support.

[00:08:24]
You have to judge, I think a little bit on that, on using new features, and we're gonna see some later on, where if it breaks, it doesn't really matter, you're just missing the cool thing. Whereas if anchor positioning breaks, who knows where your menu is going, and then it becomes a bit of a pain, so you just have to weigh like the pros and cons of that.

[00:08:43]
And if for you it's worth doing it, cuz it's a personal project that you're doing just to experiment, then definitely anchor positioning would be awesome or potentially using the polyfill as well. So with those, the bottom two allies selected, and again, if you prefer, you could do this with not first child, or something like that.

[00:09:07]
That would work completely fine here. I don't know, I'm a fan of this, so I use it. So we're choosing the second two instead of a background of red, I could just do a border top of two pixels solid. And this is the accent light. And for some reason, it didn't wrap that for me.

[00:09:31]
So, parentheses, var, and I get the border coming between them. My first thought for that was to use pseudo elements and they would definitely work, my brain just goes to using before or after all the time. But for simple lines like this, just throwing a border on there is perfect.

[00:09:47]
In doing that, we just have to figure out the spacing now. And again, with gap, it would be really awkward because you need the gap in one place coming from the parent and then the other space coming from somewhere else. So I like just having all the spacing coming from one place.

[00:10:00]
And because I know it's on the top of each one of these, then I can choose my margin-top and I can do, or I've been using logical properties a lot, so it could be margin-op. I could do a margin-block-start, which is the logical property for top and say, that's 2rem, and then I could do a padding-block-start of the same amount, and it's going to space it out.

[00:10:29]
Spacing is a bit too big, but it's just because the order we have padding, then border, then margin. I know I get the space, I get the line, and then I get the margin coming on top, so it equally spaces them all. And then maybe these could become 1.5 instead, and it looks a bit more similar to the design.

[00:10:46]
I could open my sidebar, but it's I'm not gonna be able to see anything, so we can match. Let's see if I can get it. That's what I was worried about. Now that I fixed that menu.
>> Kevin Powell: You just click Enough, you'll eventually get in there. Another way you can get some spacing values actually, if you select something and then you hold down ALT on your keyboard, Option on a Mac, I'm guessing.

[00:11:17]
When you hover over another element, it shows you the spacing between them, so I can see it's 32 which should be 2 RAM, but it looked too big. So I'm gonna eyeball that, and we'll adjust it a little bit if we feel like it needs it. And you can see actually now that I made that bigger, it's not showing me the mobile nav when I'm at the larger sizes, it's only showing it to me when I'm at the smaller screen sizes there.

[00:11:41]
And let me just turn off. There we go. It's a control/ turns off the UI in figma, so you just get the pictures, and we get that coming right there. The last thing the styling is basically done for it, the only thing left is we can't see our button when it's opened.

[00:11:59]
There's different ways that you could try and deal with this. But because we have the position absolute coming here on this, I am going to also give this a z-index of 10, and then we could also come, that's all nested in my primary navigation. And let's just go take a look here.

[00:12:20]
I'm gonna select the button, which there's different ways we could select it. You could add a class here. I already have an aria-controls, and just to enforce the use of doing it the proper way, I'm gonna use the aria-controls as my selector instead of also adding a class.

[00:12:37]
It's already there, I might as well hook into it. We've been using data attributes, we might as well use this as well, and it just enforces doing things properly. So I'm gonna come up here before my primary navigation and just add the selector for this in. So it's a attribute as well, so I just put the square brackets around it.

[00:12:57]
And I can do a z-index of 100 on that, just to make sure it's in front, and then it's always going to be in front. Actually, just really fast on that too. And then the reason I'm doing a z-index 100 here and a z-index 10, I could get away with not having that 10 on there, and it's still gonna work.

[00:13:15]
I just wanna make sure it's in front of things, so by putting the 10 on there, it's sort of one layer, and then by coming here, I'm just my 100 as a further up layer. You could do this as a much bigger number too just to make sure it's always on your top layer and pushing forward.

[00:13:31]
And I think z-index is one of those things, and get messy really fast. So if you have a bit of a strategy of just pushing things to sort of these general areas, it tends to work out a little bit easier. Now for this button, we also need to style it because right now it does not look fantastic.

[00:13:44]
And for some people that are very sharp-eyed, you might have noticed a weird issue that's happening with it, and we had some foreshadowing on why this would happen. But we're gonna do a background of transparent and a border of 0, cuz buttons always come with a border by default.

[00:14:01]
And we probably want to also come in with a position, not a position, sorry, I was doing pointer. I want a cursor, a pointer just to give us the little hand. And you can see that it's working now. We have our button there, we can hover on top of it, but the problem with it is it looks really funky [LAUGH].

[00:14:19]
So I'll let you think a little bit about why that looks so funky and how we can fix it. I just thought right now, though, I might get a question about the z-index and why it's working, cuz I don't have a position on this button, I just put that index on it.

[00:14:35]
But when they introduced grid, they allowed z-index, the use z-index with grid, and it would just work without having to have a position on it. And I don't know when, but at one point, that also got added to Flexbox. And it was just a happy accident a while ago that I discovered that, I think it wasn't always a thing.

[00:14:52]
But now if we come and take a look, the button is a direct child of the site header inner, which has a display flex on it, so I'm able to use the z-index on that without having a position on there, because it's a flex child. Now, as for why the button looks so weird, does anyone know why?

[00:15:08]
Anyone think about something, what's causing the hamburger to not look correct? It's a really, really silly thing, and it's my fault, I made you do it. It's coming from in our base right here. I said all images should have a border radius, because I said, that's a nice shortcut that we can take.

[00:15:24]
And it solved a lot of our problems, because it gave all of our images, which all of them needed a border radius. But it just highlights why these types of things can be a little bit like whoops, and it actually took me a while to figure this out.

[00:15:36]
[LAUGH] And I was like, did I muck up my SVG? What's happening with this? It was really strange. And then enough inspecting and a few other things, and I eventually realized, there's a border radius that I forgot about on there. So it's just one of those things to watch out for.

[00:15:50]
Again, the trouble of putting a general selector like this and definitely something to look forward to in the future, like if you were to do this, why you really wanna be careful with it. I'm hesitant to say that in this type of thing, we might as well just come in and say that the img has a border-radius of 0, and then it fixes it.

[00:16:13]
It definitely work. I feel like in a project like this, I would want to note somewhere that this is a potential pitfall or something that you could Could run into, because then you could start running into icons. Or you could have other things where you definitely don't want that border radius on there.

[00:16:29]
There's creative ways that you could actually make this selector only work if it's a regular image and not if it's an SVG. You could also have a utility class that turns off border radiuses, which might be potentially the best way to do it, just so if you run into it, you're like, okay, I don't want it in this specific situation.

[00:16:48]
But yeah, you could definitely have something to any icons that would be either PNGs or SVGs with an attribute selector would just get a border radius of 0, which might also be a safe way to approach it as well. Something to think about a little bit, but just for this one, this is the only thing.

[00:17:05]
So we'll throw that in there with the caveat that maybe you can find a better solution as you continue going through the project. Or if you wanna make an upgrade later on, that might be something that you refactor a little bit.