{"id":121229,"date":"2023-07-05T10:39:33","date_gmt":"2023-07-05T05:09:33","guid":{"rendered":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/docs\/hide-header-menu-scroll-show-scroll-up-elementor-sticky-headers\/"},"modified":"2023-07-05T11:59:50","modified_gmt":"2023-07-05T06:29:50","slug":"hide-header-menu-scroll-show-scroll-up-elementor-sticky-headers","status":"publish","type":"documents","link":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/docs\/hide-header-menu-scroll-show-scroll-up-elementor-sticky-headers\/","title":{"rendered":"How to Hide Header Menu in Scroll Down and Show on Scroll Up | Elementor Sticky Headers [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=\"How to Hide Header Menu in Scroll Down and Show on Scroll Up | Elementor Sticky Headers\" width=\"1200\" height=\"675\" src=\"https:\/\/www.youtube.com\/embed\/w85PCKvM1uo?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: 01 : 22 <\/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>We will see how to Hide Elementor Header Menu when you scroll down and show again when scroll up. This will automatically hide the complete Header when scrolling down, and make the header visible again when we scroll upwards.<br><br>\nOur Elementor Sticky Header comes with 8 more styles, you can change colour logo or font size as well, when the Header is sticky<br><br>\n\u25b6 Widgets Used &#8211;<br>\n<a href=\"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/widgets\/elementor-header-navigation-builder\/\">https:\/\/etemplates.wdesignkit.com\/theplusaddons\/widgets\/elementor-header-navigation-builder\/<\/a><br><br>\nYou can Create 8 More Header Effects for Elementor<br>\n\u25b6\ufe0f Watch Full Video &#8211; <a href=\"https:\/\/youtu.be\/FfXpQOhWnfM\">https:\/\/youtu.be\/FfXpQOhWnfM<\/a><br><br>\nHeader Style you can achieve using this addon<br>\n\u2705 Sticky Elementor Header Effect<br>\n\u2705 Sticky Menu with on scroll Colour Change Effect<br>\n\u2705 Transparent Sticky Header Effect<br>\n\u2705 Sticky Glass Effect\/Blurry Header Effects<br>\n\u2705 Hide Header on Scroll Down Effect<br>\n\u2705 Change Header Height on Scroll\/Shrinking Header Effect<br>\n\u2705 Change Header Menu Logo on Scroll<br>\n\u2705 Change Header Logo On Hover<br><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\u25b6 Nexter Theme Builder &#8211; <a href=\"https:\/\/nexterwp.com\/\">https:\/\/nexterwp.com\/<\/a><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":121230,"parent":0,"comment_status":"open","ping_status":"open","template":"","format":"standard","docs":[575,576],"class_list":["post-121229","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\/121229","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=121229"}],"version-history":[{"count":0,"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/documents\/121229\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/media\/121230"}],"wp:attachment":[{"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/media?parent=121229"}],"wp:term":[{"taxonomy":"docs","embeddable":true,"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/docs?post=121229"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}