Adding a sticky menu and welcome bar to your WordPress site improves navigation and user engagement, making it ideal for blogs, WooCommerce stores like “My Shop” (from your “Blog Page” guide), or membership sites (from your “Membership Plans” guide). The My Sticky Menu plugin, featured in the 6fc Live Educate WordPress video sponsored by Appmaker, offers a simple way to create a sticky navigation menu and a customizable welcome bar. This guide details how to install, configure, and test both features using the free version of My Sticky Menu, based on the video and enriched with insights from web sources.
Why Use My Sticky Menu?
- Sticky Menu: Keeps navigation accessible as users scroll, improving UX on long pages.
- Welcome Bar: Displays promotional messages or CTAs (e.g., “Sign Up”) at the top or bottom of the site.
- WooCommerce Fit: Enhances e-commerce sites by promoting deals or account pages (e.g., for “Flying Ninja” from your “Creating Products” guide).
- Free & Lightweight: Easy setup with no coding; Pro version ($29/year) adds advanced styling and scheduling.
Step 1: Install and Activate My Sticky Menu
- Download Plugin:
- Visit mythemeshop.com/plugins/my-sticky-menu/ (linked in video description).
- Click Download to get the my-sticky-menu.zip file (free version).
- Upload Plugin:
- In your WordPress dashboard, go to Plugins > Add New > Upload Plugin.
- Select the downloaded ZIP file.
- Click Install Now.
- Activate Plugin:
- Click Activate Plugin.
- Alternative: Search “My Sticky Menu” in Plugins > Add New and install directly from WordPress.org.
Step 2: Configure the Sticky Menu
- Access Settings:
- Go to Settings > My Sticky Menu (new sidebar menu, per video).
- Enable Sticky Menu:
- Under Sticky Menu Settings, select Other Class or ID.
- Choose your Primary Menu from the dropdown (e.g., “main-menu”, per video).
- If Menu Not Listed:
- Visit your site (e.g., yoursite.com).
- Right-click the menu, select Inspect, and find the menu’s class or ID (e.g., .site-header, per video).
- Copy the class/ID (e.g., site-header) and paste it into the Sticky Class field.
- Note: Most themes (e.g., Neve, Astra from your “Neve” guide) support primary menus natively.
- Customize Appearance:
- Sticky Background Color:
- Click the color picker and select a color (e.g., dark gray, per video) to distinguish the sticky menu.
- Animation:
- Choose an effect (e.g., “Slide”, per video) for when the menu becomes sticky.
- Other Options (leave default for simplicity):
- Sticky on Scroll: Set pixels (e.g., 0) for when the menu sticks.
- Opacity: Default 0.9 for slight transparency.
- Z-index: Default 9999 to ensure the menu stays on top.
- Click Save.
- Sticky Background Color:
- Test Sticky Menu:
- Refresh your site.
- Scroll down: Confirm the menu sticks to the top with the selected color and animation (per video).
Step 3: Configure the Welcome Bar
- Enable Welcome Bar:
- In Settings > My Sticky Menu, go to the Welcome Bar tab.
- Select the Enable Welcome Bar radio button (per video).
- Customize Welcome Bar:
- Position:
- Choose Top (per video) or Bottom for the bar’s placement.
- Background Color:
- Select a color matching your theme (e.g., blue, per video).
- Message:
- Edit the default text (e.g., change to “Welcome! Join us today”, per video).
- Button:
- Check Show Button to display a CTA button.
- Set Button Text to “Sign Up” (per video).
- Choose Button Background Color (e.g., contrasting color like green).
- Check Show Button on Mobile (optional, per video).
- Redirect URL:
- Enter a URL for the button click (e.g., yoursite.com/my-account, per video).
- Copy the account page URL from your site and paste it.
- Attention Effect:
- Select an effect (e.g., “Flash” or “Shake”, per video) to draw attention.
- Entry Effect:
- Choose “Slide In” (per video) or “Fade” for how the bar appears.
- Behavior:
- Check Don’t Show Welcome Bar After Submission (per video) to hide the bar after clicking.
- Other Options (leave default):
- Show on Home Page Only: Uncheck to show site-wide.
- Delay: Default 0 seconds (appears instantly).
- Z-index: Default 99999 to stay above content.
- Position:
- Save Changes:
- Click Save.
Step 4: Verify and Test
- Test Sticky Menu:
- Open your site in a new tab (e.g., yoursite.com).
- Scroll down: Confirm the menu sticks to the top with the chosen background color and animation (e.g., slide effect, per video).
- Test Welcome Bar:
- Refresh the site.
- Confirm: Welcome bar appears at the top with the set message (e.g., “Welcome! Join us today”), button (“Sign Up”), and color.
- Check: Attention effect (e.g., flash) is visible.
- Click the button: Verify it redirects to the specified URL (e.g., yoursite.com/my-account).
- Confirm: Welcome bar disappears after clicking (per settings).
- Test on mobile: Ensure the button displays if enabled.
- Troubleshoot:
- Menu Not Sticking?:
- Re-check the class/ID in Sticky Class (e.g., .main-menu).
- Increase Z-index (e.g., 10000) if overlapped.
- Welcome Bar Missing?:
- Verify Enable Welcome Bar is checked.
- Clear cache (from your “Backup and Migration” guide).
- Redirect Fails?: Ensure the URL is correct (e.g., no trailing slash issues).
- Theme Conflicts?: Test with Neve or Storefront (from your “Neve” or “Creating Products” guides).
- Mobile Issues?: Adjust mobile settings or add custom CSS (e.g., .my-sticky-menu { font-size: 14px; }).
- Menu Not Sticking?:
Step 5: Enhance with Optional Features
- Pro Features ($29/year):
- Advanced Styling: Custom fonts, shadows, and border radius for menu and bar.
- Scheduling: Show welcome bar on specific dates (e.g., Black Friday promos).
- Multiple Bars: Create different bars for different pages (e.g., shop vs. blog).
- Analytics: Track button clicks with Google Analytics integration.
- WooCommerce Integration:
- Redirect the welcome bar to a product page (e.g., yoursite.com/product/flying-ninja) or checkout.
- Use with FiboSearch for seamless navigation (from your “FiboSearch” guide).
- Custom Styling:
- Add CSS in Appearance > Customize > Additional CSS: cssCopy
.my-sticky-menu { box-shadow: 0 2px 5px rgba(0,0,0,0.2); } .welcome-bar { font-size: 16px; padding: 10px; }
- Add CSS in Appearance > Customize > Additional CSS: cssCopy
- Conditional Display:
- Use Pro to show the welcome bar only to logged-out users or specific roles (e.g., non-members, from your “Membership Plans” guide).
Pro Tips
- WooCommerce Sync: Promote deals in the welcome bar (e.g., “20% off Flying Ninja!”) with a checkout link (from your “Variation Swatches” guide).
- Engagement: Pair with Join.chat for instant support via the sticky menu (from your “Join.chat” guide).
- SEO: Add key pages (e.g., shop, account) to the sticky menu for better navigation (from your “Blog Page” guide).
- Backup: Save settings with UpdraftPlus (from your “Backup and Migration” guide).
- Theme Integration: Use Neve’s header builder to align the sticky menu (from your “Neve” guide).
- Accessibility: Ensure high-contrast colors for the welcome bar (e.g., white text on dark background).
Congratulations!
You’ve added a sticky menu and welcome bar with My Sticky Menu and 6fc Live! Your WordPress site now offers seamless navigation and eye-catching CTAs, enhancing the experience for your blog, WooCommerce store, or membership platform. Combine with your other guides (e.g., “FiboSearch,” “Neve,” “Join.chat”) for a dynamic site. Need help with Pro features or styling? Comment below or visit mythemeshop.com!