Finally after a lot of searches and personal analysis I found how to add the button menu to open and close the menu when screen is lower than 780.
The following codes are applied to Joomla 3.3.6 or previous. Sinse 3.4.3 menu some instruction already inserted and you not need to add them.
Module Menu
In the module menu, advanced tab, Class suffix set the following classes
/* Remeber to prepend the classes with a BLANK char */ nav-pills nav-collapse collapse
If you will need to click twice, try to remove the collapse as suggests from "O. llg" in the discussion.
Template PROTOSTAR - index.php
you don't need to add the following in the 3.4.3 or successive version
<!-- Button Menu Mobile - byman - START --> <div class="navbar pull-left"> <a class="btn btn-navbar collapsed" data-toggle="collapse" data-target=".nav-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </a> </div> <!-- Button Menu Mobile - byman - END -->
Edit he index.php and paste the above code between "<nav class..>" and "<jdoc:include...>" as shown in the following box
<nav class="navigation" role="navigation"> <!-- Button Menu Mobile - byman - START --> <div class="navbar pull-left"> <a class="btn btn-navbar collapsed" data-toggle="collapse" data-target=".nav-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </a> </div> <!-- Button Menu Mobile - byman - END --> <jdoc:include type="modules" name="position-1" style="none" /> </nav>
CSS - working in progress....sorry...
/* Button Menu Mobile - byman - START */ .navbar .btn-navbar{display:none;} .nav-collapse, .nav-collapse.collapse {height:auto;} @media (max-width: 979px){ .header .brand {float: left;} } @media (max-width: 767px){ .navigation ul{height: 0;} .navbar .btn-navbar {display:block;} } /* Button Menu Mobile - byman - END */
Add the above css at the end of in your template.css or in your override template.css file or using any technique you want.
Screenshots
REFERENCES
- have fun -