Add DMXozne Bootstrap 3 Navigation Nav

Add navigation into a container

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).

Change the style

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).

Alignment of the nav

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).

Add a new nav item

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.

Change the nav item text

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

Change the default link

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).

Delete items

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.

Preview the results

Now you can save your work and preview the results.