Submodule 4.1: Navigation - Icons

We will now add a simple navigation bar to the web page so that it provides links to the other pages on the website.

Open the folder "lechocolat" in your code editor and then the "index.html" file.  Add the following code to the body just above the header jumbotron.

Code:

In the above code, we can see the use of the nav element to specify the navigation information for the website. This nav element is styled by the navbar that declares it as a navigation bar, and the navbar-light class to specify that the page should use the light navigation bar.

You will now notice the addition of a link with the name of the Le Chocolat. This is the brand name for the website. You can replace this with the logo for the website. This is created by the <a class="navbar-brand"> tag.

In addition the inner ul is used to specify the items to be put in the navigation bar. This ul is styled with navbar-nav class to specify that the items should be displayed inline inside the navigation bar.

We also use the container class inside the navigation bar.

The above code will create a page displayed as: