DMXzone Bootstrap 3 Navigation Manual

Advanced: Add DMXzone Bootstrap 3 Navigation Navbar

In this tutorial we will show you how to add DMXzone Bootstrap 3 Navigation Navbar 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 a navbar above the page header. Click above your page header container (1) and click add navbar button (2).

2. The navbar was successfully added to our page. For our tutorial we choose static top style for it (1) and leave the alignment to default so that the navbar will spread within the container width (2).

3. If you prefer dark skinned navbar, simply modify the look of it by checking the inverse checkbox (1). The navbar turns dark.  Now click inside the navbar container (2) and click add header button (3).

4. You can edit the default navbar header text (1), when you're done click after the navbar header (2).

5. Click add collapse button.

6. Click inside the collapse container (1). The content inside the collapse container begins collapsed (and is toggleable) in mobile views and become horizontal as the available viewport width increases. Click add nav button (2) to add navigation within the navbar.

7. You can customize the nav that we've just added as well as its items as we showed you in our previous tutorial. Now you can save your work and preview the result.