Adding Navigation Items

[00:00:00]
>> Kevin Powell: We have two completed pages now, which is awesome, but there's one problem, our navigation can bring us to the homepage, but we can't get to our mushroom guide cuz we have to fix those links. So we're gonna look at a couple of really quick things here on what we can do to update that.

[00:00:14]
Let's just do a find on here for my primary navigation. So for this one, it's nice and easy, it's my mushroom, we'll do it the same way, mushroom-guide.html and I'm gonna do the same thing for the other one. Cuz the FAQ is on this page, I don't think it's the best design practice to have a navigation where some links are on one page anchored and other ones go to different places, but it gives us some learning opportunities here.

[00:00:44]
To do it, so because the FAQ is lower down in the page, this would be similar to how we did our skip to main link, where I can just do a hashtag here and put FAQ. So it's anchoring to that, it's gonna look for the FAQ ID on our mushroom guide, which means we just need to go and find that FAQ section.

[00:01:06]
I can shrink that down, shrink that down, and then we get the FAQ here. So on this section here, I can just do an id="faq". And if that works, it means when I click on the FAQ, I'm on the wrong page. We'll go back to the other one.

[00:01:25]
If we're on the mushroom guide and we click, it should go down to that section, except it looks like I made a mistake in my link. That looks okay.
>> Kevin Powell: There we go, I just had to save. So it jumps down to the section that we wanted to go down to.

[00:01:47]
Then I can just grab this nav cuz that's the only change I made. Make sure we copy that. Go over to my index page, find the primary-nav here and just update it, so both navigations work. And double check cuz I pasted that in but because it's collapsed I don't see it, but I can see that those changes have been made.

[00:02:10]
>> Kevin Powell: So, now let's go back to the larger screen size. That's our home page. Mushroom guide goes to the other page. FAQ brings us down to the FAQ area where I forgot to put my title. So let's go there and fix the title. And then we're gonna fix the scrolling and talk a little bit about that while we're there.

[00:02:30]
FAQ, bento grid wrapper, I never put my h2, so we'll bring the h2 in. Class="section-title", and I think it was just frequently asked questions. There we go. And seeing that, just to speed things up, we'll just add the flow here to give me that space back. So yeah, when the user now clicks on there, it brings us down to there.

[00:03:01]
So if I click FAQ, it jumps to there. This can be a little bit disorientating, especially in a situation like this, or not disorientating, but if I'm on Discover, and then I go here, and it brings me to a different page, and then I go here and it brings me to the same place.

[00:03:13]
It's not always obvious you're actually on the same page that you were before. And then you start scrolling, and you realize you are, it's one of the reasons people like smooth scrolling. So we're gonna implement that right now and talk quickly about implementing smooth scrolling, cuz it's really easy to do with CSS.

[00:03:29]
I'm gonna come all the way up to my base styles. That's layout, my base. I already have an HTML selector, so I'll do it in the same one. It can be anywhere you want, but it does need to be on the HTML selector. This would just go on anything that has a scroll bar.

[00:03:43]
So if I do it on my HTML selector, that's where the scroll bar is coming right now. If you have overflow on other elements, you can add this to those elements that you have scrolling on as well, where we do a scroll-behavior, not scroll-width, scroll-behavior of smooth. And now if I click on the FAQ, it slides and scrolls me down there, nice, easy win.

[00:04:12]
Now, some people might be looking at that going, no, where they're seeing me scroll up in the page, and they really don't like it. My wife, if she's next to me, and we're looking at a website together, if I scroll the page, she actually has to look away while I'm scrolling, it just gives her dizziness, it drives her nuts.

[00:04:26]
She has a mild case of this with a little bit of a vestibular issue. Other people have much stronger vestibular issues where they can actually get nauseous and worse from pages that have movement that they're not in control of. So if they're scrolling the page themselves, that's fine.

[00:04:40]
But if the page is doing something on its own, it just throws them off, it can cause migraines, it can cause other issues. With big things like this, with large amounts of scrolling, it's something you really have to be aware of. It's also really bad. If ever, I'm sure you've been on websites where you see it, where you have logos going sideways, or as you're scrolling, the scrolling this way is causing scrolling going the other way, that's the worst thing you could ever do for someone who has a vestibular issue.

[00:05:06]
So what you can do is, and people that have it really bad are going to have enabled this in their system settings, at media prefers reduced motion. And there's two options for the prefers reduced motion, there's reduced or there's no-preference. The no-preference one means the person left their system settings the same, they're fine with everything.

[00:05:37]
If you have the reduced one here, it means they've gone into their system settings, and they've specifically opted in for reduced motion at the operating system level. So the two options you have are, you put the motion in, then you remove it, or you do it the other way around, where here you have the no-preference.

[00:05:55]
So the default is, there is no motion, and then we can say, html scroll behavior smooth goes in here. And that way, if somebody has opted for reduced motion, they won't get the smooth scrolling, it's just going to appear there. And if they have opted in for it, or sorry if they haven't touched anything in their settings, then it will automatically scroll.

[00:06:17]
There's one other issue with the anchor scrolling. In this case, it's not a big deal, but just to highlight the issue that can come up, I'm gonna move the ID here. Don't do this in your project necessarily, but I'm gonna put it on the h2 instead. So when it scrolls down now, it will probably scroll down and might not do what I want, but it's not doing what I want.

[00:06:40]
Sometimes you'll notice it scrolls down like right to the text being right there. And the other thing that can happen is you have a sticky header, stickier fixed position header. The header will actually cover the text of where you're scrolling to, just cuz it scrolls to exactly that spot, and then the header is covering it.

[00:06:56]
So we do have another thing we can add with this, and I would actually include it out here, is scroll margin, or padding, I might have got the wrong one. I'm gonna make it really big just to highlight it, don't do it this big. But if we have a scroll margin, and I do an FAQ, I chose the wrong one.

[00:07:18]
Scroll padding, it is. Let's check that one out. There we go, and then I get 10 REM of padding on top of it, so it stops 10 REM before that. The reason I'm doing that over here is cuz if I turn off or if a user doesn't have the smooth scrolling on, that padding is still there.

[00:07:36]
So when it hit the FAQ, it's gonna jump to there and it's gonna keep that padding area on the top right there. So you could put this to any number that you want. Just to be safe, if you have a navigation, just make sure that number is bigger than what the navigation is.

[00:07:50]
And I said I didn't know if it was margin or padding, I mix it up every time I do it. It's a weird one where scroll padding is if you're putting it on the element that's actually scrolling. So, in this case, my html has the scroll bar, so the padding goes on the element that has the scroll bar.

[00:08:09]
If instead you wanna do it on the element itself that you're scrolling to, I could choose my FAQ, and on that, I could put in scroll margin. The margin would create a gap to what's getting scrolled to directly on the element that's being scrolled to. The padding is on the parent.

[00:08:27]
It's just one of those things, try one, if you got the wrong one, try the other one. And instead of doing the FAQ like that, I'd probably just do target. It's a pseudo-class, anything that's being targeted on the page can get that scroll margin, or you can do it here, but yeah, I tend to just do it on the html element itself.

[00:08:46]
Either one works, and if you try one and it's the wrong one, try the other one, and then it will work.
>> Speaker 2: Do you recommend a custom scroll bar or any pros and cons to that?
>> Kevin Powell: Custom scroll bars can look nice just for branding. They've always been a pain, Firefox had their they actually did it the proper way, according to the spec, and the other browsers didn't.

[00:09:11]
The proper spec things have been added to Chrome, and I think they're on the way in Safari if they're not there already, we can check really fast, actually. Scrollbar-width, yeah, it's in the next version of Safari. So, the scrollbar width and the scrollbar color are actually standardized now, and all the browsers are implementing it.

[00:09:33]
Yeah, we have standardization, but they're limited styling, the one that we had with the WebKit version of it, you could do a lot more. The one thing I would say not to do is custom scrolling in that it's like scroll jacking, where you're trying to make it a smooth experience.

[00:09:50]
So as you're scrolling, it looks like it's a bit more fluid and everything, but then it's disconnected from what the user's actually doing, so it can be a bit awkward.
>> Speaker 3: I want to know if you are in our own project and we want to set up a scroll motion, scroll smooth is enough or do we need a library Lenny's?

[00:10:14]
>> Kevin Powell: But you need sorry?
>> Speaker 3: Do we need that you use a library like Lenny's?
>> Kevin Powell: Yeah, no. I'm a big fan of just doing this, and not worrying about it. I think using a third party to bring in the smooth scrolling is just way overkill for what it's doing.

[00:10:30]
The one complaint about this is you can't control it, there's no timing functions, there's nothing you can do to modify how fast it's going. It just does what it does. So if you really need to customize it, then you might wanna plug in or something, but I'm like, do you really need to change it so it's 325 milliseconds or something like, I don't know?

[00:10:50]
It's how important is that customization, but bringing in a plugin just for that, when we have one line of CSS that can do it, I tend to, let's just use what's there.