Create Joomla 3.x Collapse Menu with Bootstrap 3.0 Navbar on your Template

The idea is the development of a new layout of Joomla’s com_menu which will be responsive.

This tutorial requires the knowledge of:

  • Joomla 3.x template development,
  • Bootstrap installation on Joomla template.

So, as long as you have your Joomla template (TemplateName) ready with Bootstrap support, use the steps below:

  1. Create you Menu on the Menu Manager of Joomla (backend).
  2. Copy the file php from the folder
    joomla_installation_folder/modules/mod_menu/tmpl
    and paste it inside your template in the folder. You need to rename the file to something more familiar like MyMenu.php
    joomla_installation_folder/templates/TemplateName/html
  3. Update the code of the php file to adapt Bootstrap Responsive Menu Navbar.a) Replace the following line of code:<ul class=”nav menu<?php echo $class_sfx; ?> mod-list”<?php echo $id; ?>>

with the these lines of code:
<nav class=”navbar navbar-expand-xl navbar-light pl-0″>
<button class=”navbar-toggler” type=”button” data-toggle=”collapse” data-target=”#navbarSupportedContent” aria-controls=”navbarSupportedContent” aria-expanded=”false” aria-label=”Toggle navigation”>
<i class=”fas fa-bars”></i>
</button>
<div class=”collapse navbar-collapse” id=”navbarSupportedContent”>
<ul class=”navbar-nav hitMenuBold<?php echo $class_sfx; ?>”<?php echo $id; ?>>

b) Replace the following line of code inside the foreach loop:
$class = ‘item-‘ . $item->id;

with the these line of code:
$class = ‘nav-item ml-2 item-‘ . $item->id;

c) Close the HTML tags properly at the end of the file.
Replace the closing tags:
?></ul>

with these:

?></ul></div></nav>

You may download the updated MyMenu.php file here (for security reasons it has been renamed to TXT file).

4. Go to the Extensions -> Modules -> YourMenu of Joomla (backend).

On the Advanced tab, go to the Layout drop down menu and select the MyMenu layout that you have created above. It should be under your template name
(–From TemplateName Template–). Press the “Save” button.
Check your menu on the frontend. It should be responsive by now.

Best regards
Pavlos

Leave a Reply

Your email address will not be published. Required fields are marked *