CODEWITHSUNDEEP
twitter-bootstrapjoomlatwitter-bootstrap-3navbarjoomla3.0
Kris Hunt
Kris Hunt

Reputation: 2242

Bootstrap 3 Navbar in Joomla 3

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>

Upvotes: 3

Views: 13445

Answers (2)

Muhammad Yousuf
Muhammad Yousuf

Reputation: 19

The quick solution to this is a module that you can customize as well.

http://thegrue.org/responsive-menu-module-joomla/

Download from above link. It offers responsive menu. You just need to define a module position in your template and assign module there.

Upvotes: 0

Lodder
Lodder

Reputation: 19733

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

Upvotes: 6

Related Questions