DMXzone Bootstrap 3 Manual

How to use:

• Create your page layout using DMXzone Bootstrap 3
• Click the Add Navbar button
• Add Navbar Header and Collapse
• Add Navbar Nav inside the Collapse
• Customize your Navbar Nav items
  

When to use:

• Add DMXzone Bootstrap 3 Navigation navbar on your page.
  

Add navbar

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

Static top style and default alignment

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

Add header

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

Edit the default header text

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

Add collapse button.

Click add collapse button.

Add navigation within the navbar

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.

Preview the results

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.