menu buttonmenu buttonWith the newer Protostar templates, there is a Menu Button that appears when the screen is less that 979px.

This article will instruct you on how to have the Menu Button read 'MENU'. You can also use these instructions to have the Menu Button have whatever term you wish for your language or users. Some users may be confused by the button with the three bars and not know that this will open up the list of menu items.

Within the index.php for the Protostar template, you can edit out the three bars. Here are the lines in index.php. Always make a backup before you edit the original index.php.

<nav class="navigation" role="navigation">
    <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>
    <div class="nav-collapse">
        <jdoc:include type="modules" name="position-1" style="none" />
    </div>
</nav>

Remove all three of the <span class="icon-bar"></span> lines.

In their place, type MENU.

<nav class="navigation" role="navigation">
    <div class="navbar pull-left">
        <a class="btn btn-navbar collapsed" data-toggle="collapse" data-target=".nav-collapse">
            MENU
        </a>
    </div>
    <div class="nav-collapse">
        <jdoc:include type="modules" name="position-1" style="none" />
    </div>
</nav>

 Save index.php. Look at your site with a narrow device or reduce the browser window size.

The Menu Button should now read MENU.

How to change the background color for the Menu button

You can change the background color for the Menu Button by adding a style so that it matches the color of your template. Add .navigation a.btn to the list of elements in the <head> section of your index.php

.navbar-inner, .nav-list > .active > a, .nav-list > .active > a:hover, .dropdown-menu li > a:hover, .dropdown-menu .active > a, .dropdown-menu .active > a:hover, .nav-pills > .active > a, .nav-pills > .active > a:hover, .btn-primary, .navigation a.btn
{
    background: <?php echo $this->params->get('templateColor'); ?>;
}


We also have an article on how to change when it appears:

How to change when the menu button appears for narrow screens


Has BJ.Zemplate.com helped you with understanding Joomla?

If you would like to make a small contribution to help fund this resource, that would be great, but do not feel obligated in any way.

Donation Amounts


Still not finding a special topic?

Use Google's Search function below for search the content of bj.zemplate.com.