Introduction
JX Sticky Footer Menu is a Joomla module that adds an app-like sticky footer navigation menu to your website. Perfect for mobile-first designs, it provides easy access to key navigation options regardless of where users are on your page, enhancing the overall user experience with a modern, intuitive interface.
The module is fully compatible with Joomla 4, 5, and 6, and offers complete customization flexibility with no hardcoded CSS values. Every aspect of the menu can be configured from the backend, giving you complete design freedom.
Installation
Downloading the Extension
Email: After purchasing 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: JXStickyFooterMenu_UNZIP.zip
Unzipping the Package
Use any file unzipper tool or WinRAR to unzip the JXStickyFooterMenu_UNZIP.zip package. After unzipping, you will find the following contents:
- mod_jxstickyfooter.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 > Install, then click on the "Upload Package File" tab. Click "Browse" to select the installation file (
mod_jxstickyfooter.zip), then click "Upload and Install."
A success message will be displayed once the installation is complete.
Configuration
After installation, access the module settings by navigating to Extensions > Modules and find JX Sticky Footer Menu in the list. Click on it to configure the module according to your requirements.
Menu Items Tab
Configure your navigation items:
- Menu Items: Add up to 5 menu items with labels, links, and icons
- Icon Types: Choose between Font Awesome icons or custom images
- Target Options: Open links in the same window or a new tab
Style & Appearance Tab
- Preset Styles: Choose from 10+ predefined styles including Material Design, iOS Style, Dark Mode, etc.
- Override Preset: Enable or disable custom settings to override preset styles
- Colors: Customize background, text, active item, and hover background colors
- Icon & Text Size: Adjust the size of icons and text labels
- Menu Height: Set the height of the footer menu in pixels
- Visual Options: Add dividers between items, enable box shadows
- Z-Index: Control the stacking order of the footer menu
- Transition Duration: Set animation speed for transitions
- Icon-Text Spacing: Configure spacing between icons and text in stacked layout
Typography Tab
- Font Source: Select from template inherited, system, or Google fonts
- System Font Stacks: Choose sans-serif, serif, or monospace font families
- Google Fonts: Enter any Google Font name and specify font weights
- Font Weight: Set font weight for regular and active menu items independently
Responsive & Behavior Tab
- Display Formats: Configure how icons and text appear (stacked, inline, icons only, text only) for desktop, tablet, and mobile devices independently
- Device Visibility: Hide the menu on desktop, tablet, or mobile devices
- Breakpoints: Define custom breakpoints for device detection (desktop, tablet, mobile)
- Scroll Behavior: Hide the menu when scrolling down for better content visibility
- Module Class Suffix: Add custom CSS classes for additional styling
Module Assignment
Select the pages where you want the sticky footer menu to appear. You can choose to display it on all pages or specific pages of your website.
Features
- App-like Navigation: Creates a modern, mobile-app style navigation interface that stays fixed at the bottom of the screen.
- Multiple Style Presets: Choose from 10+ pre-designed styles including Material Design, iOS Style, Dark Mode, and more.
- Fully Responsive: Automatically adapts to desktop, tablet, and mobile devices with custom breakpoints.
- Device Visibility Control: Show or hide the menu on specific device types (desktop, tablet, mobile) independently.
- Flexible Icon Options: Use Font Awesome icons or custom images for menu items with an integrated icon picker.
- Google Fonts Integration: Easily use Google Fonts in your menu for perfect typography with custom weights.
- Scroll Behavior: Option to hide the menu when scrolling down for better content visibility.
- Active Item Detection: Automatically highlights the current page in the menu with customizable active state styling.
- Display Format Options: Configure how icons and text appear with different layouts for each device type (stacked, inline, icons only, text only).
- Complete Customization: Control colors, fonts, sizes, spacing, borders, shadows, transitions, z-index, and more - all from the backend with no hardcoded CSS values.
- Joomla 4, 5 & 6 Compatible: Fully supports the latest Joomla versions with modern WebAssetManager integration.
- Template Independent: Works seamlessly with all major Joomla template frameworks without requiring modifications.
Style Presets
JX Sticky Footer Menu comes with a variety of style presets to help you quickly implement a polished design. Each preset can be customized further using the module parameters, or you can enable the "Override Preset" option to apply your custom settings completely.
Material Design
A clean, modern style with subtle elevation and Material Design color scheme. Features smooth transitions and hover effects.
iOS Style
Mimics the iOS tab bar with light background, blue accent color, and minimal design. Includes backdrop blur effect for a native iOS feel.
Dark Mode
Dark background with light text, perfect for dark mode websites or night viewing. Includes hover effects and optimized contrast.
Gradient
Beautiful gradient background with smooth color transitions for a modern look. Features text shadow effects and smooth hover animations.
Rounded
Soft rounded corners with a floating appearance for a friendly interface. Includes rounded menu items with distinct active states.
Minimal
Clean, simple design with minimal visual elements for a distraction-free experience. Features subtle active indicators.
Colorful
Each menu item has its own distinct color for a fun, vibrant navigation. Includes scale animations for active items.
Glass Effect
Semi-transparent background with blur effect for a modern, immersive look. Features smooth overlay animations on hover.
Outline
Bordered menu items with clean outlines for a subtle, elegant appearance. Includes rounded borders and distinct active states.
Floating
A floating menu that appears to hover above the content with subtle shadows. Features smooth label animations and elevated active states.
FAQ
Is the menu compatible with all Joomla templates?
- Yes, JX Sticky Footer Menu is designed to work with all major Joomla template frameworks including Helix, T3, Yoo, Gantry, Wrap, and more. The module integrates seamlessly without requiring template modifications.
Can I control which devices show the menu?
- Absolutely! The module includes device visibility controls that let you show or hide the menu on desktop, tablet, or mobile devices independently. You can also set custom breakpoints for each device type.
How many menu items can I add?
- You can add up to 5 menu items, which is the optimal number for a mobile footer menu. This ensures that each item has enough space and remains touch-friendly on smaller screens.
Can I use custom images instead of icons?
- Yes, the module supports both Font Awesome icons and custom images. You can choose which option works best for each menu item individually.
Will the menu interfere with my site's content?
- No, the module automatically adds appropriate spacing to ensure your site's content isn't hidden behind the footer menu. It also includes an option to hide the menu when scrolling down for even better content visibility.
Can I customize all the styling options?
- Yes! The module provides complete customization flexibility with no hardcoded CSS values. You can control colors, fonts, sizes, spacing, borders, shadows, transitions, z-index, and more - all from the backend interface.
Is the module compatible with Joomla 6?
- Yes, JX Sticky Footer Menu is fully compatible with Joomla 4, 5, and 6. It uses modern Joomla APIs including WebAssetManager for optimal performance and compatibility.
Can I set different display formats for different devices?
- Yes, you can configure display formats (stacked, inline, icons only, text only) independently for desktop, tablet, and mobile devices. This allows you to optimize the menu appearance for each device type.