Auto-Hiding Navigation Addon for Elementor Page Builder

Overview

Auto-Hiding Navigation for Elementor is a WordPress plugin that enhances the Elementor page builder with a modern, space-saving navigation widget. This navigation menu intelligently hides when users scroll down and smoothly reappears when they scroll up, optimizing screen space while maintaining accessibility.

Features

  • Smart Navigation Behavior: Automatically hides on scroll down and reveals on scroll up
  • Seamless Elementor Integration: Fully compatible with the Elementor page builder
  • Responsive Design: Functions properly across all device sizes
  • Customizable: Adjust appearance and behavior through Elementor’s interface
  • Performance Optimized: Lightweight implementation for minimal impact on page load times
  • Modern UX: Implements contemporary navigation patterns for improved user experience

Requirements

  • WordPress 5.0 or higher
  • Elementor 2.0.0 or higher
  • PHP 7.0 or higher

Installation

  1. Upload the Plugin:
    • Download the plugin ZIP file
    • Navigate to your WordPress dashboard
    • Go to Plugins > Add New > Upload Plugin
    • Choose the downloaded ZIP file and click “Install Now”
  2. Activate the Plugin:
    • After installation, click “Activate Plugin”
    • Ensure that Elementor is already installed and activated
  3. Verify Installation:
    • The Auto-Hiding Navigation widget should now appear in your Elementor widget panel

Usage

  1. Edit a Page with Elementor:
    • Open or create a page you wish to edit
    • Click “Edit with Elementor”
  2. Add the Navigation Widget:
    • In the Elementor editor, locate the “Auto-Hiding Navigation” widget
    • Drag and drop it into your desired section
  3. Configure the Widget:
    • Select your navigation menu
    • Adjust appearance settings (colors, typography, spacing)
    • Set behavior options (hide delay, animation speed)
    • Configure responsive options as needed
  4. Publish Your Changes:
    • Save and publish your page to apply the auto-hiding navigation

Customization

The plugin offers various customization options through the Elementor interface:

  • Appearance Settings: Customize colors, fonts, and spacing
  • Behavior Settings: Adjust hiding/showing speed and sensitivity
  • Responsive Controls: Configure different behaviors for mobile, tablet, and desktop

Troubleshooting

  • Widget Not Appearing: Ensure Elementor is installed and activated
  • Navigation Not Hiding: Check for JavaScript conflicts with other plugins
  • Styling Issues: Review your theme’s CSS for potential conflicts

Support

If you encounter any issues or have questions about the plugin, please contact our support team through:

Changelog

1.0.0
  • Initial release