CODEWITHSUNDEEP
twitter-bootstrap-3joomlamenunavigation
user5854648
user5854648

Reputation: 1121

Bootstrap 3 Navbar Dropdown Menu Issue

New to Joomla. I am building a Joomla website with Bootstrap 3, loaded it correctly and it wa working good so far. I have a navigation menu where the items are a dropdown and I don't want them to redirect on click but rather just drop down a list of links. I am nearly able to achieve that somewhat with this:

Menu Item Type: External Link

Link: #

The issue is it doesn't drop down the menu. After I click once any dropdown menu items I hover over display their links and if I hover over the one I clicked on only then will it appear. But it will not just appear on click. Help is greatly appreciated!

HTML 

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

Upvotes: 0

Views: 642

Answers (2)

user5854648
user5854648

Reputation: 1121

I found the solution through jQuery. It turns out it wasn't adding the 'Open' class on the first click. It would take two clicks or one click and hover over another dropdown element. Here's how I solved it:

jQuery('.dropdown-toggle').on('click', function(){
    jQuery(this).parent().parent().find('.dropdown').toggleClass('open')
});

Upvotes: 0

David Taiaroa
David Taiaroa

Reputation: 25475

Try adding the following either to your theme's js file, or at the end of the theme's index.php file 

jQuery(document).ready(function(){
 jQuery('.parent').addClass('dropdown');
 jQuery('.parent > a').addClass('dropdown-toggle');
 jQuery('.parent > a').attr('data-toggle', 'dropdown');
 jQuery('.parent > a').attr('href','#');
 jQuery('.parent > a').append('<span class="caret"></span>');
 jQuery('.parent > ul').addClass('dropdown-menu');
});

Update

I still have to click and then move my mouse to hover over the dropdown menu items for it to dropdown or click twice

From what you describe, it almost sounds as if you have a double nested dropdown.

You might want to use web inspector to examine the actual HTML code being generated by your Joomla site and comparing it with the Bootstrap documentation. I think the minimum you need is 

<li class="dropdown"> 
    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a> 

    <ul class="dropdown-menu"> 
        <li><a href="#">Action</a></li> 
        <li><a href="#">Another action</a></li> 
    </ul> 
</li>

If still no joy, try taking this dropdown HTML, create a custom HTML module with it and add it to any module position on your site, this might help identify where the problem is.

Good luck!

Upvotes: 0

Related Questions