OK we're almost there with no bars.
This is actually going to be quick.
We have one thing to talk about which is positioning are enough enough of the placement.
So what that means is do you want your nav bar at the top or at the bottom.
That's one.
One thing that we could answer but also we want it to stay at the top as you scroll.
You want it to be sticky which I'll show you what that looks like.
This is really all we're going to talk about in this video.
Now this kind is kind of bothers me about the docs that they show you this and you can't tell a difference
at all.
I mean there's there's nothing free to tell.
Really.
They had this tiny little white space to indicate like look this one is fixed to the top.
This one is at the bottom but it gives you no indication of what sticky means for example.
So let me show you I have a new document.
It's empty.
I'm going to start by just copying over one of our tough bars.
It doesn't matter which one you just put them in there or put it in there and save.
And I'll say this one is default Nav..
All right let's call it default placement and now what I'm going to do is add a bunch of space in here
or a bunch of text so I'm going to do a paragraph with like a thousand characters of Vorm ipsum.
And before I do that I'm going to make a container and then do that inside of it just to give us you
could also give your body a height.
But I'm going to do it this way.
So Lorem 1000 and save.
There we go.
All right.
So this is the way the default behavior if I can finish scrolling.
The default behavior for a nav bar where it starts at the top and then you scroll and you scroll past
it.
It doesn't stay there.
Unfortunately I can't have them all on the document at the same time so I'm going to copy this and then
comment out the first one so it stays there.
So you can see default placement.
But now I'm going to do fixed top fixed top like that and then all we do is add the class fixed dash
top.
And now as I scroll you'll see that it remains at the top.
Now one problem we have with this fixed now is that it does cover our content a bit.
So you would want to give your body not the body you'd want to give the container or your paragraph
some margin.
You have to account for that space.
OK.
So the next one that will do come.
This one out.
We can do the same thing but fix it to the bottom which you can probably figure out what that does already.
I'll just change this though.
Fixed bottom save and now it's at the bottom of our page and it stays there.
Now as we toggle open the drawer it opens upwards instead of downwards.
OK so that's fixed bottom.
And now we have my favorite one.
I don't use this very often but I just like it called sticky top.
The problem with sticky top if I just do a new nav bar I change the brand to be sticky top and I give
it a class of sticky dash top.
You can't really tell that anything is different.
It looks like a fixed top but if I put some space above it let's do a Jumbotron Jumbotron fluid and
the jumbotron and inside of there let's do an H one with class equal to display one.
Let's do Tex Centuri maybe.
And I'll just say scroll down
knockdowns supposed to be a save.
OK.
So we have scroll down Jumbotron to spell this wrong.
Yes I did.
I want that background.
All right.
So now we have some content up top maybe an image or something.
And then as we scroll it it sticks to the top.
So a lot of people like that effect.
You come back and it releases.
So that's really the difference street sticky and fixed.
When you do your stickie you can have space above it and then it catches on the top it sticks.
So I'll leave that one.
The last thing I'll point out is that if you want you can put your nav bar in a container.
Now this only works if you're working with a default or fixed top nav bar.
It's not going to work with the sticky one.
It's not going to work with a fixed bottom but if you put your ear it inside of a container which actually
to demonstrate this I'm just going to go back to an earlier instead of deleting all this.
Let's go to this purple Ackbar.
What I can do where is that starts here.
I can do a container and then put all this content inside of it and now NFR just goes part of the way
across the screen and some people like this sometimes you don't want your never to go all the way across.
It still collapses still looks pretty nice.
I'm not crazy about it but that's an option.
Now one other option is to still have your nav go all the way across and put the container on the inside
so that your content inside of the Nav doesn't go all the way across.
If that makes sense.
So that will look like this.
So you have the knack of going all the way and then your container preventing the content from spreading
out all the way across.
We still get that collapse still looks nice totally up to you if you prefer it that way.
So I'll leave this one like that.
So that's it for now.
I mean there's a lot we have an exercise coming up.
And like I said I always reference ADOX there's a lot of syntax but they're very useful.
They look nice.
They work well and we haven't even changed fonts or colors really.
We've been working with just the default styles.
All right.
Moving on to an exercise.