menu buttonThe newer releases of Protostar will have a menu button appear instead of the Main Menu in position-1 when the screen size is less than 979px.

At this screen width, the menu button will appear instead of the menu items titles on tablet devices, even in landscape mode.

This may be undesirable, as many menus will still appear nicely on tablets, in landscape or portrait mode.

If you want your menu items to still appear on tablet devices, what is required is some that @media styles added to your custom stylesheet or to the bottom of template.css. These styles will overwrite previous styles for the button and the menu items.

Remember that if you upgrade your Joomla installation, the Protostar menu is overwritten and you can lose your customization. It is best to copy and rename the Protostar template using the proper steps in Template Manager, then set this new template as the default. Make edits to the copy and leave the Protostar template alone.

Styles to add to keep the menu items showing for tablets

The following lines need to be added to your custom stylesheet or at the end of template.css:

@media (max-width: 979px) and (min-width: 767px) {
    .navigation  .pull-left {display: none;}
    .nav-collapse, .nav-collapse.collapse {
        height: auto;
        overflow: visible;
    }
   .nav-collapse .nav > li {
       float: left;    
    }
   .nav-collapse .nav > li.active  > a{color: #ffffff;}
   .nav-collapse .nav > li > a{
       color: #08c; font-weight: normal;
   }   
}

The color style should be set to your template's default color for links, etc. The (min-width: 767px) can be changed to whatever screen width you desire for the menu button to appear.


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.