{"id":121243,"date":"2023-07-05T10:40:55","date_gmt":"2023-07-05T05:10:55","guid":{"rendered":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/docs\/create-full-width-menu-background-change-effect-hover\/"},"modified":"2023-07-05T11:59:37","modified_gmt":"2023-07-05T06:29:37","slug":"create-full-width-menu-background-change-effect-hover","status":"publish","type":"documents","link":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/docs\/create-full-width-menu-background-change-effect-hover\/","title":{"rendered":"Create a Full Width Menu with Background Change Effect on Hover (Elementor) [Video Tutorial]"},"content":{"rendered":"<!-- wp:embed \",\"type\":\"video\",\"providerNameSlug\":\"youtube\",\"responsive\":true,\"className\":\"wp-embed-aspect-16-9 wp-has-aspect-ratio\"} -->\r\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\r\n<iframe title=\"Create a Full Width Menu with Background Change Effect on Hover (Elementor)\" width=\"1200\" height=\"675\" src=\"https:\/\/www.youtube.com\/embed\/vdjaynv2iHE?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" allowfullscreen><\/iframe>\r\n<\/div><\/figure>\r\n<!-- \/wp:post-content -->\r\n\r\n<\/figure>\r\n<!-- \/wp:embed -->\r\n<!-- wp:heading  -->\r\n<h5 class=\"wp-block-heading\">Video Duration: 14:40 <\/h5>\r\n<!-- \/wp:heading -->\r\n<!-- wp:heading -->\r\n<h2 class=\"wp-block-heading\">Video Overview<\/h2>\r\n<!-- \/wp:heading -->\r\n<!-- wp:paragraph -->\r\n<p>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 <br>\n   1) Full-Width Menu with Background Change &#038; Text Stroke <br>\n   2) Full-Screen Menu in Elementor with Image Reveal on hover <br>\n<br>\nAnd 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. <br>\n<br>\n\u25b6  Plus Elementor Widgets Used: <br>\n<a href=\"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/widgets\/animated-service-boxes\/\">Background Hover Effects<\/a> &#8211; https:\/\/etemplates.wdesignkit.com\/theplusaddons\/widgets\/animated-service-boxes\/ <br>\n<br>\n<a href=\"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/widgets\/off-canvas\/\">PopUp Hamburger Menu<\/a> &#8211; https:\/\/etemplates.wdesignkit.com\/theplusaddons\/widgets\/off-canvas\/ <br>\n<br>\n<a href=\"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/widgets\/advanced-typography\/\">Text Stroke Effects<\/a> &#8211; https:\/\/etemplates.wdesignkit.com\/theplusaddons\/widgets\/advanced-typography\/ <br>\n<br>\n<a href=\"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/widgets\/mouse-cursor-icon-widget\/\">Custom Mouse Cursor<\/a> &#8211; https:\/\/etemplates.wdesignkit.com\/theplusaddons\/widgets\/mouse-cursor-icon-widget\/ <br>\n<br>\nFull-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. <br>\n<br>\n\u25b6 Get 120+ Powerful Widgets for Elementor  &#8211;  <a href=\"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/pricing\/\">https:\/\/etemplates.wdesignkit.com\/theplusaddons\/pricing\/<\/a> <br>\n<br>\n\u25b6 Nexter Theme Builder &#8211; <a href=\"https:\/\/nexterwp.com\/\">https:\/\/nexterwp.com\/<\/a> <br>\n<br>\n  USE CODE &#8216; YOUTUBE10 &#8216; TO ENJOY EXTRA 10% DISCOUNT<\/p>\r\n<!-- \/wp:paragraph -->\r\n<!-- wp:shortcode -->\r\n\n<div class=\"wp-block-buttons pseocta is-content-justification-center is-layout-flex wp-container-core-buttons-is-layout-a89b3969 wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button pseocta\"><a class=\"wp-block-button__link has-nxt-global-color-1-background-color has-background wp-element-button\" href=\"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/pricing\" target=\"_blank\" rel=\"noreferrer noopener\">Get The Plus Addons for Elementor<\/a><\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-buttons pseocta is-content-justification-center is-layout-flex wp-container-core-buttons-is-layout-a89b3969 wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button pseocta\"><a class=\"wp-block-button__link has-nxt-global-color-1-background-color has-background wp-element-button\" href=\"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/elementor-widgets\/\" target=\"_blank\" rel=\"noreferrer noopener\">View 120+ Elementor Widgets Demo<\/a><\/div>\n<\/div>\n\n\n\n<style>\n.pseocta .wp-block-button{\n padding: 1em 0em !important;\n}\n<\/style>\n\r\n<!-- \/wp:shortcode -->","protected":false},"author":16,"featured_media":121244,"parent":0,"comment_status":"open","ping_status":"open","template":"","format":"standard","docs":[575,576],"class_list":["post-121243","documents","type-documents","status-publish","format-standard","has-post-thumbnail","hentry","docs-video-tutorials","docs-watch-video-tutorials"],"acf":[],"_links":{"self":[{"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/documents\/121243","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/documents"}],"about":[{"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/types\/documents"}],"author":[{"embeddable":true,"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/users\/16"}],"replies":[{"embeddable":true,"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/comments?post=121243"}],"version-history":[{"count":0,"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/documents\/121243\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/media\/121244"}],"wp:attachment":[{"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/media?parent=121243"}],"wp:term":[{"taxonomy":"docs","embeddable":true,"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/docs?post=121243"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}