Sticky Footer Menu

Introduction

Sticky Footer Menu is the ultimate Joomla module for creating a professional, mobile app-style navigation bar that stays fixed at the bottom of your website. With 12 stunning themes, smart menu item selection, Font Awesome icon picker, and premium animations, transform your site's navigation into a modern, accessible experience that works perfectly on all devices.

Key Highlights:

• Full Joomla 4, 5 & 6 Compatibility
• 12 Professional Themes (Dark, Light, Colorful, Gradient, Glass Morphism, Minimal, Neon Glow, Ocean Breeze, Sunset, Matte Gray, Pastel Dream, Cyber Dark, Custom)
• Multiple Layout Styles (Mobile App, Compact, Horizontal, Mixed)
• Smart Menu Item Selection (Custom URL or Joomla Menu Item with modal picker)
• Font Awesome Icon Picker with instant search
• Device Visibility Control (Show/Hide on Desktop, Tablet, Mobile)
• Premium Animations and Ripple Tap Effect
• Active State Management (auto-detects current page)
• Complete Styling Control
• Modern WebAssetManager Support

Installation

Downloading the Extension

Email: After you purchase the extension from our store, you will receive an email containing a link to download the extension.

Store: Alternatively, you can download the extension from the "Downloads" section in our store. If you are a new user, you need to create an account using the same email address you used for the purchase.

Click to download the extension package: StickyFooterMenu_UNZIP.zip

Unzipping the Package

Use any file unzipper tool or WinRAR to unzip the StickyFooterMenu_UNZIP.zip package. After unzipping, you will find the following contents:

• mod_sticky_footer_X.x.zip: This is the installation file compatible with Joomla 4.x, 5.x, and 6.x.
• ReadMe.txt: Contains vital information about the current version of the extension.

Installing the Extension

To install the extension, log in to the backend of your Joomla website.

• For Joomla 4, 5 & 6: Navigate to Extensions > Manage > Install, then click on the "Upload Package File" tab. Click "Browse" to select the appropriate installation file (mod_sticky_footer_X.x.zip), then click "Upload and Install."

A success message will be displayed once the installation is complete.

Enabling the Module

After installation, navigate to Extensions > Modules, search for "Sticky Footer Menu", and click on it to enable and configure the module.

Menu Settings

Access the module settings by navigating to Extensions > Modules, and find Sticky Footer Menu in the list.

Menu Items

Click on the "Add" button to add menu items to the sticky footer. For each menu item, configure:

• Icon: Click the button next to the Icon field to open the Font Awesome icon picker modal. Browse hundreds of icons with instant search, or type to filter. The icon picker automatically detects whether to use fab (Font Awesome Brands) or fa (Font Awesome Regular) prefix based on the icon selected.
• Link Type: Choose how the menu item links:
  • Custom URL: Enter a custom URL manually (e.g., /index.php, https://example.com/page)
  • Joomla Menu Item: Select an existing Joomla menu item using the modal picker. The menu item name will be automatically fetched and displayed.
• Menu Item Name: Enter the display text for the menu item (e.g., "Home", "About", "Contact"). This field only appears when Link Type is set to "Custom URL".
• Custom URL: Enter the URL for the menu item. This field only appears when Link Type is set to "Custom URL".
• Select Menu Item: Click the "Select" button to open a modal and choose a Joomla menu item. The menu item name will be automatically fetched. This field only appears when Link Type is set to "Joomla Menu Item".
• Menu Target: Select whether the link opens in the same window (Same Window) or a new tab (New Tab).

Text Before/After Menu

• Text Before Menu: Enter text or HTML to display before the menu items. This is useful for branding, additional information, or custom content.
• Text After Menu: Enter text or HTML to display after the menu items. This can be used for additional links, contact information, or custom content.

Social Icons

Social Media Icons

Click on the "Add" button to add social media icons to the sticky footer. For each social icon, configure:

• Icon: Click the button next to the Icon field to open the Font Awesome icon picker modal. Browse and select social media icons (e.g., fa-facebook, fa-twitter, fa-linkedin, fa-youtube, fa-instagram). The icon picker automatically uses the fab prefix for social media icons.
• Link: Enter the URL to your social media profile (e.g., https://www.facebook.com/yourpage).
• Icon Color: Select the color for the social icon. Each icon can have a different color to match the brand colors. If left empty, the icon will inherit the menu text color from the selected theme.
• Icon Target: Select whether the link opens in the same window (Same Window) or a new tab (New Tab). Recommended: New Tab for social media links.
• Icon Status: Enable (Published) or disable (Unpublished) the icon. Unpublished icons will not be displayed.

Popular Social Media Icons

• Facebook: fa-facebook (Brand)
• Twitter: fa-twitter (Brand)
• LinkedIn: fa-linkedin (Brand)
• YouTube: fa-youtube (Brand)
• Instagram: fa-instagram (Brand)
• Pinterest: fa-pinterest (Brand)
• WhatsApp: fa-whatsapp (Brand)
• TikTok: fa-tiktok (Brand)

Layout Settings

Layout Configuration

• Layout Style: Choose how the footer menu should look and behave on all devices:
  • Mobile App Style (Icons + Text): Icons with text labels below, perfect for native app experience (default, recommended)
  • Compact (Icons Only): Icons only for minimal footprint, ideal for space-constrained designs
  • Horizontal (Text Only): Text-only navigation for traditional menu layouts
  • Mixed (Icons + Text + Social): Flexible combination with icons and text on one line, social icons in separate row
• Show on Desktop: Toggle the sticky footer visibility on screens wider than 1024px (default: Show).
• Show on Tablet: Toggle the sticky footer visibility on screens between 768px and 1024px (default: Show).
• Show on Mobile: Toggle the sticky footer visibility on screens smaller than 768px (default: Show).
• Stretch Background: When enabled, the colored footer bar spans the full browser width (100%). When disabled, the background matches the menu width (default: Yes).
• Menu Width: Set the maximum width of the centered menu container (default: 1200px). You can use pixels (e.g., 1200px), rem units (e.g., 80rem), or percentages (e.g., 90%).
• Menu Item Alignment: Control how menu items are aligned inside the bar:
  • Left: Aligns menu items to the left side
  • Center: Centers menu items (default, recommended)
  • Right: Aligns menu items to the right side
  • Spread Out (Space Between): Distributes items evenly with space between them
  • Even Gaps (Space Around): Distributes items evenly with equal space around each item
• Corner Radius: Round the top corners of the footer in pixels (default: 20, range: 0-50px). Higher values create more rounded corners. Set to 0 for square corners.
• Space Between Menu Items: Add breathing room between menu items in pixels (default: 8, range: 0-30px).
• Menu Padding: Adjust the overall padding inside the bar in pixels (default: 12, range: 0-30px).

Styling Settings

Theme Selection

• Theme: Select a ready-to-use theme. Choose Custom to unlock manual color controls:
  • Dark (Default): Classic dark theme with white text
  • Light: Clean light theme with dark text
  • Colorful: Vibrant multi-color theme
  • Gradient: Beautiful gradient background
  • Glass Morphism: Modern frosted glass effect
  • Minimal: Clean, minimal design
  • Neon Glow: Eye-catching neon effect
  • Ocean Breeze: Calming blue ocean theme
  • Sunset: Warm orange and pink theme
  • Matte Gray: Professional matte finish
  • Pastel Dream: Soft pastel colors
  • Cyber Dark: Futuristic dark theme
  • Custom: Unlocks all color customization options

Shadow Settings

• Menu Shadow: Add depth with a drop shadow behind the menu (default: Enabled).
• Shadow Intensity: Select how soft or strong the shadow should appear (appears when Menu Shadow is Enabled):
  • Light: Subtle shadow for minimal depth
  • Medium: Balanced shadow (default, recommended)
  • Heavy: Strong shadow for maximum depth

Color Customization (Custom Theme Only)

The following color options only appear when Theme is set to "Custom":

• Menu Bar Background Color: Select the background color for the menu bar (default: Dark gray #1a1a1a).
• Menu Item Hover Background Color: Select the background color when hovering over menu items (default: Dark gray #2a2a2a).
• Menu Bar Border Color: Select the border color for the menu bar (default: rgba(255, 255, 255, 0.1)).

Color Customization (All Themes)

• Active Menu Item Color: Select the color for the active/selected menu item (default: Blue #007bff). The module automatically detects the current page and highlights the corresponding menu item.
• Menu Text Color: Select the primary text color for menu labels (default: White #ffffff). Works with all themes.
• Menu Text Hover Color: Select the text color when hovering over menu items (default: Blue #007bff). Works with all themes.

Typography & Icon Sizes

• Menu Icon Size: Size of the menu icons in pixels (default: 20, range: 12-32px).
• Menu Text Size: Font size for the menu labels in pixels (default: 11, range: 8-16px).
• Social Icon Size: Size of the social icons displayed on the right in pixels (default: 18, range: 12-32px).

Animation & Effects

• Micro Animations: Add subtle hover and active transitions for a premium feel (default: Enabled).
• Ripple Tap Effect: Show a Material Design ripple effect when tapping menu buttons (appears when Micro Animations is Enabled, default: Enabled). This creates a modern, interactive feel similar to mobile apps.

Advanced Settings

Additional CSS

• Additional CSS: Add custom CSS code to further customize the appearance of the sticky footer menu. You can target these elements:
  • .jx-sticky-footer - The main container
  • .jx-sticky-footer-wrapper - The full-width background wrapper
  • .jx-sticky-footer-menu - The centered menu container
  • .jx-menu-items - The menu items list
  • .jx-menu-item - Individual menu items
  • .jx-menu-item-link - Menu item links
  • .jx-menu-icon - Menu item icons
  • .jx-menu-text - Menu item text labels
  • .jx-social-icons - The social icons list
  • .jx-social-item - Individual social icon items
  • .jx-social-link - Social icon links
  • .jx-social-icon - Social icons
  • .jx-before-text - Text before menu
  • .jx-after-text - Text after menu

  Example: .jx-menu-item-link:hover { transform: scale(1.1); }

Module Assignment

• Module Position: The sticky footer menu should typically be assigned to a position that appears on all pages, or use "All" in menu assignment. Common positions: footer, bottom, or a custom position.
• Menu Assignment: Configure which pages the module appears on. For a sticky footer, you typically want it on all pages, so select "All" or specific menu items.
• Module Status: Set the status to Published to make the module visible on the frontend.

Features

Key Features

• 12 Professional Themes: Choose from Dark, Light, Colorful, Gradient, Glass Morphism, Minimal, Neon Glow, Ocean Breeze, Sunset, Matte Gray, Pastel Dream, Cyber Dark, or Custom. One-click theme switching for instant visual transformation.
• Multiple Layout Styles: Mobile App Style (icons + text), Compact (icons only), Horizontal (text only), or Mixed (flexible combination). Switch layouts instantly to match your design needs.
• Smart Menu Item Selection: Choose between Custom URL or Joomla Menu Item with modal picker. Automatic menu name and URL generation. No manual entry needed - just click and select.
• Font Awesome Icon Picker: Modal icon picker with instant search. Browse hundreds of icons with live preview. Smart prefix detection (fab/fa) for social icons. One-click icon selection with visual feedback.
• Device Visibility Control: Show or hide separately on Desktop, Tablet, and Mobile. Perfect for responsive design strategies. Control exactly where your menu appears.
• Premium Animations & Effects: Smooth micro animations for hover and active states. Material Design ripple effect on tap. Customizable animation intensity. Professional feel that enhances user experience.
• Active State Management: Automatic detection of current page. Highlights active menu item automatically. Customizable active color for brand consistency. Visual feedback for better navigation.
• Complete Styling Control: Customize background, text, hover, active, and border colors. Shadow controls (Light, Medium, Heavy). Layout controls (width, alignment, spacing, padding). Border radius for rounded corners. Stretch background option.
• Social Media Integration: Add unlimited social media icons. Custom colors for each icon. Individual enable/disable controls. Smart icon prefix detection. Perfect for connecting with your audience.
• Responsive & Accessible: Fully responsive on all devices. iOS safe area support (notch compatibility). Touch-friendly tap targets. Keyboard navigation support. Print styles (hidden when printing). Reduced motion support for accessibility.
• Joomla 4, 5 & 6 Compatible: Full support for all modern Joomla versions. Uses WebAssetManager for optimal performance. Modern PHP 8.0+ code standards. Future-proof architecture. Regular updates and security patches.

FAQ

• How do I add menu items?

  • Click on the "Add" button in the Menu Settings tab, then use the icon picker to select an icon, choose Link Type (Custom URL or Joomla Menu Item), and configure the settings. For Joomla Menu Items, click "Select" to open the modal picker.

• How do I use the icon picker?

  • Click the button next to the Icon field to open the Font Awesome icon picker modal. You can browse icons, use the search box to filter, and click on an icon to select it. The picker automatically detects whether to use fab or fa prefix.

• Can I link menu items to existing Joomla menu items?

  • Yes! Set the Link Type to "Joomla Menu Item", then click the "Select" button to open a modal and choose from your existing Joomla menu items. The menu item name will be automatically fetched.

• How do I change the theme?

  • Go to the Styling Settings tab and select a theme from the Theme dropdown. You can choose from 12 professional themes or select "Custom" to unlock manual color controls.

• What's the difference between the layout styles?

  • Mobile App Style: Icons with text labels below (native app experience). Compact: Icons only. Horizontal: Text only. Mixed: Flexible combination with icons and text on one line.

• How do I hide the menu on mobile devices?

  • Go to the Layout Settings tab and set "Show on Mobile" to Hide. You can also control visibility separately for Desktop and Tablet.

• What is the Stretch Background option?

  • When enabled, the colored footer bar spans the full browser width (100%). When disabled, the background matches the menu width. The menu container is always centered regardless of this setting.

• How does the active state work?

  • The module automatically detects the current page URL and highlights the corresponding menu item. You can customize the active color in the Styling Settings tab.

• Can I disable animations?

  • Yes, set the "Micro Animations" option to Disabled in the Styling Settings tab. This will also disable the ripple effect.

• What happens if the menu width exceeds the window width on mobile?

  • The menu automatically adapts to the screen width. Menu items will wrap to multiple lines if needed, and the layout adjusts to ensure all items remain accessible.

• How do I customize colors when using a non-custom theme?

  • You can still customize the Active Menu Item Color, Menu Text Color, and Menu Text Hover Color with any theme. For full color control, select the "Custom" theme.

Troubleshooting

• Menu Not Displaying

  • Ensure the module is published, assigned to the correct menu items or pages, and that the module position exists in your template. Verify module access levels match your user's access level. Check the device visibility settings (Show on Desktop/Tablet/Mobile) in Layout Settings.

• Menu Not Sticky

  • Check that the CSS files are loading correctly. Verify browser console for errors. Ensure your template doesn't have conflicting CSS that overrides the sticky positioning. The module uses position: fixed with bottom: 0.

• Icons Not Showing

  • Verify that Font Awesome is loading correctly. In Joomla 4+, Font Awesome is included by default. Check browser console for font loading errors. Ensure the icon picker was used to select icons (not manually entered).

• Icon Picker Modal Not Opening

  • Ensure jQuery and Bootstrap are loaded (included with Joomla by default). Check browser console for JavaScript errors. Clear Joomla cache and browser cache. Verify the fields/iconpicker.php file exists.

• Menu Item Name Not Auto-Fetching

  • Ensure you're using the "Joomla Menu Item" Link Type and have selected a menu item using the modal picker. The name is automatically fetched from the database when a menu item is selected.

• Active State Not Working

  • Verify that the menu item URL matches the current page URL. Check browser console for JavaScript errors. Ensure the module JavaScript is loading correctly.

• Ripple Effect Not Working

  • Ensure "Micro Animations" is enabled in Styling Settings. Check browser console for JavaScript errors. Verify that the module JavaScript is loading correctly.

• Theme Not Applying

  • Clear Joomla cache and browser cache. Check browser console for CSS loading errors. Verify that the theme CSS classes are being applied to the module container.

• Menu Items Not Aligning Correctly

  • Check the "Menu Item Alignment" setting in Layout Settings. Verify that the menu width is not too narrow. Check browser console for CSS conflicts with your template.

• Styling Issues

  • Check if your template's CSS is overriding the module styles. Use browser developer tools to inspect elements. You can add custom CSS via the Additional CSS field in Advanced Settings. Verify that the jx- prefix classes are being used correctly.

• Menu Width Exceeding Screen on Mobile

  • The menu automatically adapts to screen width. If items are too wide, they will wrap to multiple lines. Consider reducing the number of menu items or using the Compact layout style for mobile.

Getting Help

If you continue to experience issues:

• Check Joomla error logs for PHP errors
• Enable Joomla debug mode to see detailed error messages
• Check browser console for JavaScript errors
• Visit our support forum: https://support.joomlax.com
• Ensure you're using the latest version of the module