This article will walk you through the steps to create a fixed menu that stays at the top of your website pages for your Joomla website using the Protostar template

These instructions are assuming that you have already set up a menu and assigned it to position-1 and that you have already added the Menu Class Suffix of " nav-pills" to your menu module.

Visit the following article for clarification.

How to make a your navigation horizontal

Edit the index.php at the root of your templates files

Open up the index.php in the root of your protostar template folder (or in the copied and renamed template folder). Be sure to make a backup copy before editing the original.

Look for this section in index.php.

<?php countModules('position-1')) : ?>
    <nav class="navigation" role="navigation">
        .
        .
        .
    </nav>
<?php endif; ?>

Move this whole section and paste it in just it before the <div class="body" id="top">

What this did was move position-1 to the top of the page and outside the <div class="body"> and <header> area. The menu in position-1 will still have the same styling for the <nav class="navigation"> that it had before you edited the file.

Add an element to contain the menu

We will now create a containing element for the new menu location. The containing element will be styled to stay at the top of the page, even as the content scrolls. The menu section will be styled to remain in the middle of the page on wider screens, but will still have the drop down menu button for narrow screens.

Add the lines of code in bold shown in the section below.

<?php countModules('position-1')) : ?>
    <div class="fixedtopmenu">
    <nav class="navigation" role="navigation">
        .
        .
        .
    </nav>
    </div>
<?php endif; ?>

Edit your user.css stylesheet to style the menu properly

Open up your user.css stylesheet in a text editor.

If you do not have a user.css stylesheet, visit the following article.

Add a custom stylesheet to the Protostar Template - user.css

Add the following lines to user.css. You may wish to change the background color or make other style changes in this section.

body.site {padding: 0px;}
.body > .container {padding-top: 60px;}
.fixedtopmenu{position: fixed;background: #FFFFFF;width: 100%;}
.fixedtopmenu nav.navigation {margin: 0 auto; width: 960px;}

Save this to your sites files and open up your website to test how these changes affected your site.

You may find that you wish to add additional styles in the @media section of your stylesheet for the menu to appear as you wish on smaller 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.