{"id":46,"date":"2019-02-05T12:51:27","date_gmt":"2019-02-05T10:51:27","guid":{"rendered":"http:\/\/www.spanidis.eu\/?p=46"},"modified":"2020-08-05T13:34:33","modified_gmt":"2020-08-05T11:34:33","slug":"create-joomla-3-x-collapse-menu-with-bootstrap-3-0-navbar-on-your-template","status":"publish","type":"post","link":"http:\/\/www.spanidis.eu\/?p=46","title":{"rendered":"Create Joomla 3.x Collapse Menu with Bootstrap 3.0 Navbar on your Template &#8211; example"},"content":{"rendered":"<p>The idea is the development of a new layout of Joomla\u2019s com_menu which will be responsive.<\/p>\n<p>This tutorial requires the knowledge of:<\/p>\n<ul>\n<li>Joomla 3.x template development,<\/li>\n<li>Bootstrap installation on Joomla template.<\/li>\n<\/ul>\n<p>So, as long as you have your Joomla template (TemplateName) ready with Bootstrap support, use the steps below:<\/p>\n<ol>\n<li>Create you Menu on the Menu Manager of Joomla (backend).<\/li>\n<li>Copy the file <strong>default.php<\/strong> from the folder<br \/>\njoomla_installation_folder\/modules\/mod_menu\/tmpl<br \/>\nand paste it inside your template in the folder. You need to rename the file to something more familiar like <strong>MyMenu.php<\/strong><br \/>\njoomla_installation_folder\/templates\/TemplateName\/html<\/li>\n<li>Update the code of the <strong>php<\/strong> file to adapt Bootstrap Responsive Menu Navbar.<br \/>\na) Replace the existing line of code:<\/p>\n<p><em>&lt;ul class=&#8221;nav menu&lt;?php echo $class_sfx; ?&gt; mod-list&#8221;&lt;?php echo $id; ?&gt;&gt;<\/em><\/p>\n<p>with these lines of code:<\/p>\n<p><em style=\"font-size: inherit;\">&lt;nav class=&#8221;navbar navbar-expand-xl navbar-light pl-0&#8243;&gt;<\/em><em style=\"font-size: inherit;\">&lt;button class=&#8221;navbar-toggler&#8221; type=&#8221;button&#8221; data-toggle=&#8221;collapse&#8221; data-target=&#8221;#navbarSupportedContent&#8221; aria-controls=&#8221;navbarSupportedContent&#8221; aria-expanded=&#8221;false&#8221; aria-label=&#8221;Toggle navigation&#8221;&gt;<\/em><em style=\"font-size: inherit;\">&lt;i class=&#8221;fas fa-bars&#8221;&gt;&lt;\/i&gt;<\/em><em style=\"font-size: inherit;\">&lt;\/button&gt;<\/em><em style=\"font-size: inherit;\">&lt;div class=&#8221;collapse navbar-collapse&#8221; id=&#8221;navbarSupportedContent&#8221;&gt;<\/em><em style=\"font-size: inherit;\">&lt;ul class=&#8221;navbar-nav hitMenuBold&lt;?php echo $class_sfx; ?&gt;&#8221;&lt;?php echo $id; ?&gt;&gt;<\/em><em style=\"font-size: inherit;\"><\/p>\n<p><\/em><span style=\"font-size: inherit;\">b) Replace the following line of code inside the foreach loop:<\/p>\n<p><\/span><em>$class = &#8216;item-&#8216; . $item-&gt;id;<\/p>\n<p><\/em>with these line of code:<\/p>\n<p><em>$class = &#8216;nav-item ml-2 item-&#8216; . $item-&gt;id;<\/p>\n<p><\/em>c) Close the HTML tags properly at the end of the file.<br \/>\nReplace the closing tags:<\/p>\n<p><em>?&gt;&lt;\/ul&gt;<\/p>\n<p><\/em>with these:<\/p>\n<p><em>?&gt;&lt;\/ul&gt;&lt;\/div&gt;&lt;\/nav&gt;<\/p>\n<p><\/em>You may download the updated <strong style=\"font-size: inherit;\">MyMenu.php<\/strong><span style=\"font-size: inherit;\"> file <\/span><a style=\"font-size: inherit;\" href=\"http:\/\/www.spanidis.eu\/wp-content\/uploads\/MyMenu.txt\">here <\/a><span style=\"font-size: inherit;\">(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.\u00a0<\/span><\/li>\n<\/ol>\n<p>4. Go to the Extensions -&gt; Modules -&gt; YourMenu of Joomla (backend).<\/p>\n<p>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<br \/>\n(&#8211;From TemplateName Template&#8211;). Press the &#8220;Save&#8221; button.<br \/>\nCheck your menu on the frontend. It should be responsive by now.<\/p>\n<p>Best regards<br \/>\nPavlos<\/p>\n","protected":false},"excerpt":{"rendered":"<p>The idea is the development of a new layout of Joomla\u2019s 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: Create you Menu on the Menu &hellip; <a href=\"http:\/\/www.spanidis.eu\/?p=46\" class=\"more-link\">Continue reading <span class=\"screen-reader-text\">Create Joomla 3.x Collapse Menu with Bootstrap 3.0 Navbar on your Template &#8211; example<\/span> <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[1],"tags":[2,10,3,5,4],"_links":{"self":[{"href":"http:\/\/www.spanidis.eu\/index.php?rest_route=\/wp\/v2\/posts\/46"}],"collection":[{"href":"http:\/\/www.spanidis.eu\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.spanidis.eu\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.spanidis.eu\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.spanidis.eu\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=46"}],"version-history":[{"count":9,"href":"http:\/\/www.spanidis.eu\/index.php?rest_route=\/wp\/v2\/posts\/46\/revisions"}],"predecessor-version":[{"id":105,"href":"http:\/\/www.spanidis.eu\/index.php?rest_route=\/wp\/v2\/posts\/46\/revisions\/105"}],"wp:attachment":[{"href":"http:\/\/www.spanidis.eu\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=46"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.spanidis.eu\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=46"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.spanidis.eu\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=46"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}