DMXzone Bootstrap 3 Navigation Manual

Advanced: Add DMXzone Bootstrap 3 Navigation Nav

In this tutorial we will show you how to add DMXzone Bootstrap 3 Navigation nav on your page.
*You can also check out the video.

How to do it

1. We created a simple page layout using DMXzone Bootstrap 3. We want to add navigation into a container on our page. Click inside the Bootstrap container (1) and click add nav button (2).

2. A nav with three dummy items was successfully added on our page. When you click the nav (1) you can change its style. For our tutorial we'll use pills nav style (2).  

3. You can also change the alignment of the nav. We leave the align settings to default (1). If you want, you can easily make the nav items equal widths (2) of their parent at screens wider than 768px. On smaller screens, the nav links will be stacked. Nav items are also vertically stackable, all you need to do is to enable the stacked option (3).

4. To add more nav items, select any of the nav items (1) and click add item after button (2), this will add a new nav item on the right.

5. You can also change the nav item text by selecting it and change it with your own text.

6. You can also change the default link (#). Select the nav item (1) and go to the properties tab (2) and enter your link in the field (3).

7. Back in the Bootstrap 3 Navigation tab (1), you can delete any nav item by just selecting (2) it and clicking the delete item button (3). If you are using the nav with targets on the same page it automatically highlights nav items based on scroll position.

8. Now you can save your work and preview the results.