How to Set Up Menumax for a Sticky Topbar in Joomla's Cassiopeia Template

Positioning the Module:

The Menumax module comes with sticky header menu functionality. It can be positioned at the topbar, below the top, in the Menu, or even in the Banner position. But if you want the sticky header menu to work, make sure that the native Cassiopeia Menu is positioned in the topbar position.

This guide assumes you have already created a child template and its index.php file for your website.

Step 1: Access Your Child Template

1. Go to the Joomla admin panel.
2. Navigate to System > Site Templates.
3. Click on the "Cassiopeia_child Details and Files" link.

Step 2: Replace the Header Code

1. Open the index.php file of your child template (cassiopeia_child).
2. Find the header code, which will look like this:



        <header class="header container-header full-width<?php echo $stickyHeader ? ' ' . $stickyHeader : ''; ?>">
        

3. Replace the code between the <header> and </header> tags with the following:

 
        <!-- Sticky Topbar -->
        <header class="sticky-header full-width<?php echo $stickyHeader ? ' ' . $stickyHeader : ''; ?>">
        <?php if ($this->countModules('topbar')) : ?>
            <div class="container-topbar">
                <jdoc:include type="modules" name="topbar" style="none" />
            </div>
        <?php endif; ?>
        </header>

        <!-- Main Header -->
        <header class="container-header full-width">
        <div class="container-menu">
            <?php if ($this->countModules('below-top')) : ?>
                <div class="grid-child container-below-top">
                    <jdoc:include type="modules" name="below-top" style="none" />
                </div>
            <?php endif; ?>

            <?php if ($this->params->get('brand', 1)) : ?>
                <div class="grid-child">
                    <div class="navbar-brand">
                        <a class="brand-logo" href="/<?php echo $this->baseurl; ?>/">
                            <?php echo $logo; ?>
                        </a>
                        <?php if ($this->params->get('siteDescription')) : ?>
                            <div class="site-description"><?php echo htmlspecialchars($this->params->get('siteDescription')); ?></div>
                        <?php endif; ?>
                    </div>
                </div>
            <?php endif; ?>

            <?php if ($this->countModules('menu', true) || $this->countModules('search', true)) : ?>
                <div class="grid-child container-nav">
                    <?php if ($this->countModules('menu', true)) : ?>
                        <jdoc:include type="modules" name="menu" style="none" />
                    <?php endif; ?>
                    <?php if ($this->countModules('search', true)) : ?>
                        <div class="container-search">
                            <jdoc:include type="modules" name="search" style="none" />
                        </div>
                    <?php endif; ?>
                </div>
            <?php endif; ?>
        </div>
        </header>
        

4. Save the file.

Step 3: Assign the Main Joomla Menu to the "topbar" Position

1. Go to Extensions > Modules.
2. Locate your main Joomla menu module.
3. Set its position to "topbar".

Step 4: Install and Configure Menumax Module

1. Install the Menumax menu from the Joomla Extensions Manager.
2. Activate and publish the menu module.
3. Assign the Menumax to the "topbar" or "menu" position.

Step 5: Customize Colors

1. Under the "Module" Tab, choose the colors for your website, including the hamburger menu color.


2. Navigate to the "Menu Assignment" Tab and choose where the menu should be visible (e.g., on all pages or specific ones).

Step 6: Save and Close

1. Click the Save & Close button to apply your changes.

Step 7: Check the Website

1. Open your website and check the new sticky menu.
2. If changes don't appear, try clearing your Joomla cache by navigating to System > Clear Cache under "Maintenance" and clearing it.

The MenuMax Module is currently in use on this site and available for purchase. You can buy it at our Extensions Shop