It may be that you wish to have two locations for menus on your web page similar to the web page image shown here.

bar across top

You have the main menu, with the major topics, placed into position-1, but you want to have a secondary menu with a couple of links at the very top of the page above the logo in the header area.

This can be accomplished by adding a new position to the Protostar template. You may add more than one module to this position, but you will need to style these modules so that they site properly on the page and behave the way you wish for a responsive design.

Add a new position to the Protostar template

To add this new position, you will need to edit the index.php and the templateDetails.xml files in the protostar folder under templates. Always make a safety backup before editing the original files.

Add the position to templateDetails.xml

Download  and ppen up templateDetails.xml in a text editor. Do not use a word processor to edit files, as it may add extra characters that will cause problems. You can also edit this file from within Template Manager if you don't have access to a text editor and an ftp program.

In the <positions> area, add a new position name that you will recognize for this new location. For example:

<positions>
    ....
    <position>top-menu-bar</position>
    <position>position-0</positions>
    <position>position-1</positions>
    ...
<positions>

When a new position is added to templateDetails.xml, it will now appear in the dropdown for selecting a position from the Protostar template in Module Manager. You first need to instruct the template where you want the position to be located.

Include the position the index.php file

Add a place for this new position in index.php. As mentioned before, always make a safety backup of this file before editing the original. For this top location, we want to add it before the <header>.

Scroll down in index.php, to where you see the <header>...</header> section in the HTML portion of the file. Add the following lines:

<?php if ($this->countModules('top-menu-bar')) : ?>
    <div class="topmenubar">
        <jdoc:include type="modules" name="top-menu-bar" style="none" />
    </div>
<?php endif; ?>

What these lines are accomplishing are to add some php, in the form of an if statement, so that this area is only added if a module is assigned to this position. If there are no modules assigned, then this will not be added to the HTML for the document. We then wrap a <div> around the position so we can style it as we wish.

You will note that these lines also add a class for this <div>. This is so we can target specific styles for this particular element.

Save these files and upload them back in with the files for your Joomla installation.

Add some styling for this new <div>

In your custom style sheet, add some styling for this new position. This could be things like a set height, background color, font-family, etc. The default width will be auto, which means that it will take up the entire width of the page, unless you specify otherwise.

If you don't have a custom style sheet set up, refer to this article:

Add a custom stylesheet to the Protostar template

Assign modules to this new position

Go into the Joomla administration menu, under Module Manager. Create a new module for your search box using Smart Search or what ever extension you are using for the search feature.

Within Module Manager for this particular module, pull down the position selector. You should see the new position on the list.

You may wish to add a Module Class Suffix so you can target styling, such as maintaining a specific width, float, etc. If you want two modules to be assigned to this position, you likely will need to have one float to the left and the other float to the right, and also assign widths so that this can be possible.

If you need to understand how to use a Module Class Suffix, read this article:

How to add a class to a module for customized styling

Create a secondary menu in Menu Manager for these other links that you want in your menu at the top. Create a new module with a type of Menu and assign this secondary menu. Place this menu in the new position as well.

 


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.