Bootstrap 3 Navbar in Joomla 3

Kris Hunt picture Kris Hunt · Nov 8, 2013 · Viewed 13.2k times · Source

I'm trying to create a Bootstrap 3 template in Joomla 3. My main navigation module is called "nav", so I place it on the page with the snippet:

<jdoc:include type="modules" name="nav" style="none" />

This creates a ul with the class "nav menu". I need this to be "nav navbar-nav" instead because of the way Bootstrap 3's navbar is set up. How would you go about doing this? Is there a way to do it without Javascript? Here's what I've got so far:

<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
        Menu
    </button>
</div> <!-- navbar-header -->

<div class="collapse navbar-collapse navbar-ex1-collapse">
    <jdoc:include type="modules" name="nav" style="none" />
</div> <!-- navbar-collapse -->
</nav>

Answer

Lodder picture Lodder · Nov 8, 2013

In the Joomla backend, go to the Menu module, click on the "Advanced" tab and you will see a field called "Module Class Suffix".

In there, add the following:

 navbar-nav

Note that there is a space before it