Bootstrap nav bar in joomla 3

Question

I tried to make my excisting template ready to use with Joomla 3.7.0. Everything went easier then I expected untill I got to the part where I had to implement the menu. In the layout I was using the bootstrap nav-bar with dropdown parts. That is the part where it went wrong.

So I searched how to fix the problem and found a few solutions on this site and the joomla site. The solution that fixed the problem in a kind of way is adding this:

    <script type="text/javascript">
  (function(jQuery){   
    jQuery(document).ready(function(){
      // dropdown
      jQuery('.parent').addClass('dropdown');
      jQuery('.parent > a').addClass('dropdown-toggle');
      jQuery('.parent > a').attr('data-toggle', 'dropdown');
      jQuery('.parent > a').append('<b class="caret"></b>');
      jQuery('.parent > ul').addClass('dropdown-menu');
      jQuery('ul.dropdown-menu li.dropdown a.dropdown-toggle').hover(
          function () {
            jQuery('ul.dropdown-menu li.dropdown').removeClass('open');
            jQuery(this).parent().addClass('open');
          }
      );
    });
  })(jQuery);
</script>

This fixes my problem but there is a little problem and that is that when the page loads you first see the old style and than snaps to the correct version. My guess is because the javascript changes the values later than the page is loaded for the user.

So I searched a little more and found solutions where you have to change

modules/mod_menu/tmpl/default.php

I tried to do a few changes in this places:

// The next item is deeper. if ($item->deeper) { echo '<ul class="nav-child unstyled small">'; }

and

/ The menu class is deprecated. Use nav instead ?> <ul class="nav menu<?php echo $class_sfx; ?>"<?php echo $id; ?>> <?php foreach ($list as $i => &$item)

But nothing really solved the problem unfortunately. So is there something I'm missing or is it just not possible to use proper?

Answer 1

Ultimately mod_menu isn't designed for bootstrap, so the best approach is probably to write bespoke CSS for this module if you are able to do that.

However, if you want a more hacky approach that should improve what you currently have, override modules/mod_menu/tmpl/default.php (ie place a copy of this file under templates/yourtemplate/html/mod_menu/default.php) with the following changes, which I think should replicate what you are doing with the jQuery:

Line 61

    $class .= ' deeper';

to

    $class .= ' deeper dropdown';

and (line 87)

    echo '<ul class="nav-child unstyled small">';

to

    echo '<ul class="nav-child unstyled small dropdown-menu">';

This should replicate the following aspects of your jQuery, without having to wait for the DOM to load

jQuery('.parent').addClass('dropdown');
jQuery('.parent > ul').addClass('dropdown-menu');

We are adding it to deeper rather than parent, since it is possible to have a parent item without a submenu.

At the bottom of this file, then add the following

<script type="text/javascript">
  (function(jQuery){   
      // dropdown
      jQuery('.deeper > a').addClass('dropdown-toggle');
      jQuery('.deeper > a').attr('data-toggle', 'dropdown');
      jQuery('.deeper > a').append('<b class="caret"></b>');
      jQuery('ul.dropdown-menu li.dropdown a.dropdown-toggle').hover(
          function () {
            jQuery('ul.dropdown-menu li.dropdown').removeClass('open');
            jQuery(this).parent().addClass('open');
          }
      );
  })(jQuery);
</script>

Remove your other version of this script from the template.

By removing the onReady and placing this as soon as the menu html has been loaded on the page, this will be applied at that point rather than waiting for the rest of the page to load before it runs. At the very least, this should reduce the time where it shows the non-bootstrap style.