In the last tutorial we created our navigation bar.
One important thing to note is that when we shrink our web browser the links stack on top of one another.
This causes an issue on very small mobile screens because of the amount of space.
This entire block takes up
a solution is to make the nav bar collapsible on very small screens while adding the necessary code
to show you the result.
And then we can go over
I've added in the code blocks to make this effect work.
I'll refresh the page so you can see a preview before we go over it.
You can see now that when we shrink the size of the web browser the navigation bar hides the links unless
we click on this button
only then does it expand.
The user can contract the navigation menu by clicking on the button again.
You can see that we also have our sub menu there.
This makes it much more convenient for the user when browsing the web page on a handheld device
in order to create this.
We first need to start with a button element
and this is positioned after the div with with the class set to nav bar header inside the button element.
We create a class nav bar toggle and a data toggle attribute set to collapse.
We also need to set a data target.
We've set it to NAV 1.
This is very important and you'll see why this is relevant in the second in the button element.
Create three spam tags each with the class set to icon bar.
This is what styles are button you can see these three lines here.
These are each icons
next.
We need to wrap our NAV bar buttons into a div with the same I.D. as the data target attribute that
we previously set.
So remember that data target we set over here to not have one.
Well we need to create a div with the I.D. nav one those two values must match in order for this button
to work.
Give this div a class two classes collapse and that bar collapse.
It's also important to remember to close the open div.
We just created and you can see that we've wrapped both our unordered list elements inside this div
the open and closed.
And that's all there is to it.
So once you save your file and refresh you'll now see the button there which allows you to expand and
contract the navigation menu items.