We can create navigation bar is using Bootstrap is seen in this example.
This nav bar extends from one end of the browser's content area to the other on large screens.
When viewed on smaller screens the navigation bar stacks the links one on top of the other
so is navigation bar is fully responsive this navigation bar was developed by creating a math element
and assigning the class nav bar and not by default the nav bar default class allows us this style the
bar will try different styles later in this lesson.
Next we create a container that will contain the nav bar in all its elements after our container div
we create another div with the class nav bar header inside this div.
We have our header my website inside an eight element with the class nav bar brand.
We also have attached a link using the H RDF attribute and we've assigned an empty link.
This represented by the.
The pound sign here
we define our not bar links using an unordered list with the class set to NAV and nav bar dash nuff
the UL element contains for list items in this case one for each link seen on the bar.
As you can see we've assigned a class to the first list item and set it to active.
That's what creates the highlight effect on link 1
after the NAV tags
we've created a container that contains our page content
we're currently using a fixed width for both in nav bar container and the content container.
And that's represented by the div class equals content container attribute here and also over here we
can change both to a fluid container by changing the container class to container fluid on both elements.
So now we can see that the content and the nav bar stretch or span across the entire browser's content
area.
We'll go back to the fixed with container we can also change the style of the knife bar by changing
the net.
Our default class to nav bar inverse
and you can see that this inverts the colors of the Navarre.
We've also added right aligned nav bar items and this was done by creating a well element you can see
that this well code blog represents link one to link four.
Shortly after that we have another element in this euro element has the class nav nav bar in that bar
right the nav bar right.
Class is what right aligns these two items here and these two items are represented by these list by
these two list elements.
Each list element has a link attribute within each RDF tag we've set it to an empty link for now.
We've also included a span tag and we've set that class to glyphs on gift on START empty.
That's what gives us the star icon.
As you learned in earlier lessons and for the second list item we've set it to graphic on search.
And that's why we have the magnifying glass next to our link to our labels are right here if we wanted
to change them we could just update the text here we can give our NAV bar a fixed position both top
or bottom so it doesn't school with the rest of the content on the page.
And to do that it's fairly simple we just add the class nav bar fixed top or nav bar fixed.
Bottom to the NAV element right here
so if we go ahead and set it to that bar fixed bottom and save and refresh you can see that it is now
at the bottom of the page and that's fake.
So it will not school with the rest of the content on the page.
And if you wanted to add that at the top just replace the word bottom with top and now it will remain
fixed at the top.
It will not scroll with the rest of the content
we can add a drop down menu to any of our net bar buttons by adding the drop down menu code block where
we want the menu to appear so I'll go ahead and I'll paste in the code block by now we should be familiar
with creating dropdown menus.
It's the same idea we worked with it in the past so I'll create the drop down menu before our link one
button
and just adjust the formatting
saved the file so there's our menu button now with our drop down menu.