Lets Start Coding
Create a folder and inside the folder create an HTML file. Open the HTML file using any text editor. I am using ATOM and I highly recommend this. If you are unsure on how to use or download ATOM I will provide links below to help you setup.
Create your basic HTML structure with head, body and etc. and load the BootStrap using its CDN as show in figure 1.1. If you are unsure on how to do it you can go to my first blog post and learn.
Inside the Body tags create a header tag and close it. Also make sure to write Notes for yourself stating it is a header as comments. Figure 2.1 will show an example. It is important to Document what the code is doing because later when you or another developer works on the project, it will help them understand code faster.
Create a div and give it a class name “navbar navbar-inverse navbar-fixed-top” as shown in figure 3.1. It is a BootStrap class name. I will now explain the meaning of this class name.
- navbar: this first word indicates that the content inside this div will be for a navigation bar.
- navbar-inverse: This line of code indicates that the navbar will be black as described by the inverse tag. BootStrap has many colors such as navbar-light, navbar-blue and many others. Links will be given down below for you to discover more.
- navbar-fixed-top: this code forces the navbar to stay at the top at all times.
Create another div and give it a class name “navbar-header” as shown in figure 4.1.
- navbar-header: indicates that it is a header. Now you will have to put the content inside the header.
Create a div inside the navbar-header and create a button with a class name of “class=”navbar-toggle” data-toggle=”collapse” data-target=”.navbar-collapse”” as shown in figure 4.1. This is the most important part of the navbar as it is also the most complicated one.
- navbar-toggle: It indicates that it will be a toggle menu. Where it can be on and off.
- data-toggle=”collapse” : it tell that it will collapse once the screen size changes to a small size.
- data-target=”.navbar-collapse” : it will telling that navbar will collapse once screen changes to a mobile size.
There are three span tag inside the navbar-header. Those are the horizontal line which will make a hamburger menu. You may change the content inside it as you may wish.
Create a new div with a class named “navbar-collapse collapse”
This div is in relation to the data-toggle and data-target that you had assigned in the div above. This is class tell that once the toggle/hamburger menu is pressed this menu will show and it will target the content inside this class.
You also have list inside the div. The list are given a class name “nav navbar-nav navbar-right”. As explained about this tell that it is part of the navbar and it will on the right side of the page. The code will be shown in figure 5.1 .
The complete inside the header will be shown in Figure 6.1 and how the navbar looks in figure 7.1
- You can link with BootStrap using a CDN and do not have to download any files.
- A beautiful navigation bar can be created within minutes.