topbar 3 positions

This article will cover how to create a top bar that extends across the entire screen and contains three custom module positions. These positions will take up 1/3 of the area when viewed on a wide screen but will stack if viewed on a screen less than 767 pixels wide.

The method that we are using here will place this top bar above the <header> section of your document. If you wish to include the <header> inside this top bar, you will have to make additional changes to the index.php to relocate this element and all its contents.

This task will require editing the index.php and the templateDetails.xml in the root of the Protostar template for Joomla 3+. We will also add some styles in the style sheet. We suggest that you keep all custom styles in a separate stylesheet. To set up this custom style sheet, please refer to this article: Add a custom stylesheet to the Protostar template.

As always, before editing the index.php file that resides in the root of the Protostar template, templates/protostar/index.php, we suggest that you make a safety backup of the file. You will be editing the original index.php. Keep a log of your edits and place comment lines in the document. If you upgrade the Protostar template, this file will be overwritten. You will need to either replace the file with the previous version or replace the edits.

Create three new custom module positions

Open up the templateDetails.xml in a text editor and add these three new positions in the <positions> section.

<position>topbar-left</position>
<position>topbar-middle</position>
<position>topbar-right</position>

Save this file back to the root of the Protostar template folder. By adding these lines to the templateDetails.xml, these new positions will appear in the dropdown list of Positions when you are creating or editing a module.

Create a top bar that extends across the entire screen

With the default settings for the Protostar template set to Static, the web page content is all contained inside <div class="container>. This container is placed in the middle of a large screen and is assigned  the style of width: 940px.

We want to create a new area of the web page that sits above this container. Inside this new area we will add the three custom positions using Joomla API.

Open up index.php in a text editor. Just after the line <div class="body"> and before the line <div class="container<?php echo ($params->get('fluidContainer') ? '-fluid' : ''); ?>">, add the following section.

<!-- CUSTOM -->
<?php if (($this->countModules('topbar-left')) || ($this->countModules('topbar-middle')) || ($this->countModules('topbar-right'))) : ?>
<div id="top-bar">
<!-- CUSTOM POSITIONS ADDED HERE -->
    <div id="topbarleft">
        <jdoc:include type="modules" name="topbar-left" class="span4" style="xhtml" />
    </div>
    <div id="topbarmiddle">
        <jdoc:include type="modules" name="topbar-middle" class="span4" style="xhtml" />
    </div>
    <div id="topbarright">
        <jdoc:include type="modules" name="topbar-right" class="span4" style="xhtml" />
    </div>
<!-- END CUSTOM POSITIONS -->
</div><!-- END TOP BAR -->
<?php endif; ?>
<!-- END CUSTOM -->

What this does is add a new <div id="top-bar">. It uses PHP to test if any modules exist and any of those positions. The two || characters mean "or". If any module has been assigned to any of these positions, then the #top-bar and all of the <div>s are created. If there are no modules assigned to these positions, the #top-bar will not be added.

Add styling for this new section

Open up your custom style sheet in a text editor and add the following lines:

#top-bar { width: auto; height: 200px; padding: 10px;}
#top-bar [id^="topbar"] {float: left; width: 31.914893614%; margin-left: 2.127659574%;}
#top-bar #topbarleft {margin-left: 0px;}
@media (max-width: 767px) {
    #top-bar {height: auto;}
    #top-bar [id^="topbar"] {float: none;margin-left: 0px;width: auto;}
}

You may wish to change the height setting for #top-bar. A set height is necessary as the inner <div>s all have a float. You may also wish to add additional styles for the appearance of these new module positions.

The @media styles will make it so the divs stack on top of each other when viewed on a narrow screen.

Things to note

There are a few things that you should realize about this method:

The content of the modules must be kept within the limits of the height that you assign to the #top-bar. 

You will need to watch that you only have three of these modules assigned to any one page, or it will break the layout of the page.

If a module has been assigned to any of these positions, all of the <div>s are created. If a module has been assigned to the center or right position, they will sit to the center or the right of the top bar.

The #top-bar will not appear if no modules are assigned to these positions.


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.