Create a Full Width Menu with Background Change Effect on Hover (Elementor) [Video Tutorial]

Updated onApril 11, 2026By

Key Takeaways

  • The Plus Addons for Elementor includes Background Hover Effects for creating a full-width menu with a background change effect on hover.
  • The Plus Addons for Elementor features a Custom Mouse Cursor widget to enhance the design of the full-screen menu.
  • The tutorial covers two types of designs: Full-Width Menu with Background Change & Text Stroke and Full-Screen Menu with Image Reveal on hover.
Table Of Content
YouTube video
Video Duration: 14:40

Video Overview

Discover how to create a full-width menu with a background change effect on hover without any code. This Elementor Hamburger menu will be a Full-Screen menu and we will be covering 2 types of designs
1) Full-Width Menu with Background Change & Text Stroke
2) Full-Screen Menu in Elementor with Image Reveal on hover

And since we are using the powerful The Plus Addons for Elementor, we will also add a custom circular cursor to the design to make it look more elegant.

▶ Plus Elementor Widgets Used:
Background Hover Effects – https://theplusaddons.com/elementor-widget/elementor-animated-service-boxes/

PopUp Hamburger Menu – https://theplusaddons.com/elementor-builder/popup-builder/

Text Stroke Effects – https://theplusaddons.com/elementor-widget/advanced-typography-for-elementor/

Custom Mouse Cursor – https://theplusaddons.com/elementor-widget/elementor-mouse-cursor-icon/

Full-Screen Menu has been very popular these days, users like to create such Popup Hamburger menu with custom cursor, Background change effect or text strokes and much more. Thats why we bring the set of Full-screen Hamburger Navigation Menu Hover Effects.

▶ Get 120+ Powerful Widgets for Elementor – https://theplusaddons.com/pricing//

▶ Nexter Theme Builder – https://nexterwp.com/

USE CODE ‘ YOUTUBE10 ‘ TO ENJOY EXTRA 10% DISCOUNT

Get The Plus Addons for Elementor
View 120+ Elementor Widgets Demo

About the Author

Photo of Aditya Sharma CMO of The Plus Addons for Elementor
CMO · The Plus Addons for Elementor · 7 years experience

He has spent years in the WordPress ecosystem building, breaking, and optimizing sites until they actually perform. He works at the intersection of speed, growth, and usability, helping creators ship websites that load fast and convert. An active WordPress community contributor sharing through tools, tutorials, and direct collaboration. Tested practice, not theory.

WordPressElementorn8nAIClaudeAutomationServer
LinkedIn X GitHub YouTube Website
Get Instant Answers to all your questions about The Plus Addons for Elementor, trained on 1000+ Docs and Videos

Related Frequently Asked Questions

What should I do if the background change effect on hover isn't working?

If the background change effect isn't functioning, check the settings for the Background Hover Effects widget in The Plus Addons for Elementor. Ensure that the hover state is properly configured and that there are no conflicting styles in your theme or other plugins. Sometimes, caching issues can also prevent changes from appearing, so clear your cache if necessary.

Can I use the full-width menu with a custom cursor on mobile devices?

The full-width menu with a custom cursor is primarily designed for desktop use. While it may function on mobile, the experience might not be optimal due to different screen sizes and touch interactions. For mobile menus, consider using the PopUp Hamburger Menu from The Plus Addons for Elementor, which is specifically tailored for mobile navigation.

What are the best practices for designing a full-width menu in Elementor?

When designing a full-width menu, focus on simplicity and clarity. Use contrasting colors for the background change effect to enhance visibility. Incorporate the Text Stroke Effects from The Plus Addons for Elementor to make text stand out. Also, ensure that the menu is responsive and looks good on all devices by testing it across different screen sizes.

Are there any limitations when using the full-width menu feature?

One limitation to consider is that the full-width menu is designed specifically for Elementor and won't work with other page builders like Gutenberg or Divi. Additionally, while the menu can be customized extensively, overly complex designs may affect loading times and user experience, so aim for a balance between aesthetics and performance.

Last reviewed: April 11, 2026

Related Docs