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 default.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 existing line of code:

   <ul class=”nav menu<?php echo $class_sfx; ?> mod-list”<?php echo $id; ?>>

   with 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 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). Do not use it directly since it may be from an older joomla version. Just have a look of the changes in the actual 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