CSS Navigation Bar

For a better command of CSS, and to understand how Navbars work, let’s try creating the navbar of this website itself.

First, we will create an <nav> element in HTML and then add the attributes to it. Later the CSS would be applied.

 

Output:

Now let’s add CSS to change this navbar according to our desired output.

Note: .Icon is the class that I added later in the first <a> tag to provide it with different styling than the other elements.

 

The output of this code would be identical to what we had as our reference.