Sticky Header Plugin Naveed Academy

Description

Plugin Overview

The Naveed Academy Sticky Header Plugin is a premium WordPress plugin that transforms your website header into a sticky element that changes appearance when users scroll. With customizable colors, transparency effects, and smooth animations, this plugin enhances user experience and website professionalism.

Price: $5.00
Developer: Naveed Academy
Version: 1.7

Features

• Make any header element sticky on scroll

• Customizable background colors for normal and sticky states

• Transparency control for sticky background (0-100%)

• Adjustable scroll distance trigger

• Smooth color transition animations

• Fully responsive design

• Easy-to-use admin interface

Installation

Method 1: WordPress Admin Panel (Recommended)

1. Log in to your WordPress admin dashboard

2. Navigate to Plugins → Add New

3. Click on the Upload Plugin button

4. Click Choose File and select the plugin ZIP file

5. Click Install Now

6. After installation, click Activate Plugin

Method 2: Manual Installation via FTP

1. Unzip the plugin files to your computer

2. Connect to your website using an FTP client (like FileZilla)

3. Navigate to the /wp-content/plugins/ directory

4. Upload the entire plugin folder to this directory

5. Log in to your WordPress admin dashboard

6. Navigate to Plugins → Installed Plugins

7. Find “Sticky Header with Scroll Background” and click Activate

Configuration

Step-by-Step Setup

1. After activation, go to Sticky Header in your WordPress admin menu

2. Header CSS Selector

   • Enter the CSS selector for your header element

   • Common examples: .site-header, #masthead, header, .main-header

   • Use your browser’s inspect tool to find the correct selector

3. Background Color on Scroll

   • Select the color your header should change to when sticky

   • Use the color picker or enter a hex value

   • Click “Transparent” for a transparent background

4. Background Opacity on Scroll

   • Adjust the slider to set transparency level (0-100%)

   • 0% = completely transparent, 100% = completely opaque

5. Original Background Color

   • Set the default background color of your header

   • This will be restored when not scrolled

6. Scroll Distance

   • Set how far users need to scroll (in pixels) before the header becomes sticky

   • Recommended: 50-200 pixels

7. Click Save Settings to apply your changes

Finding Your Header Selector

1. Right-click on your website header and select “Inspect”

2. Look for a class (starts with .) or ID (starts with #) in the HTML

3. Common selectors:

   • .site-header (used by many themes)

   • #masthead (used by Twenty Twenty themes)

   • header (HTML5 header element)

   • .main-header (used by some themes)

Customization Examples

Basic Configuration

Header Selector: .site-header
Background Color: #2c3e50 (dark blue)
Opacity: 90%
Original Background: transparent
Scroll Distance: 100px

Transparent Header Example

Header Selector: #masthead
Background Color: #ffffff (white)
Opacity: 85%
Original Background: transparent
Scroll Distance: 50px

Colored Header Example

Header Selector: .main-header
Background Color: #3498db (blue)
Opacity: 100%
Original Background: #f8f9fa (light gray)
Scroll Distance: 150px

Troubleshooting

Header Not Becoming Sticky

• Verify your CSS selector is correct

• Check for JavaScript errors in browser console

• Ensure your theme’s header has a positioned layout

Background Color Not Changing

• Verify there are no CSS conflicts with your theme

• Check that the opacity is not set to 0%

Performance Issues

• The plugin is optimized for performance, but if you experience issues:

  • Try increasing the scroll distance

  • Ensure you’re using a valid CSS selector

Support

For technical support or questions about this plugin:

• Email: support@naveedacademy.com

• Website: www.naveedacademy.com

Frequently Asked Questions

Q: Can I use this with any WordPress theme?
A: Yes, the plugin works with most WordPress themes as long as they use standard header markup.

Q: Does this work with mobile devices?
A: Yes, the plugin is fully responsive and works on all screen sizes.

Q: Can I have different settings for desktop and mobile?
A: Not in the current version, but this feature is planned for a future update.

Q: Will this slow down my website?
A: The plugin is optimized for performance and should have minimal impact on loading times.

Changelog

Version 1.7

• Added background opacity control (0-100%)

• Improved color picker interface

• Enhanced mobile responsiveness

Version 1.6

• Added transparent background option

• Improved settings organization

• Fixed JavaScript compatibility issues

Version 1.5

• Initial release

• Basic sticky header functionality

• Color picker implementation

License

This is a premium plugin developed by Naveed Academy. Purchase grants you a license to use the plugin on one website. Redistribution or reselling is prohibited.