Skip to main content

Hide Your Header When Visitors Scroll Down with AI

The AI makes your sticky Elementor header slide away on scroll down and come back on scroll up, after your yes.

Difficulty Beginner
Time ~10 min

Prerequisites

A site connected to WPVibe with Elementor and Sticky Header Effects for Elementor 2.2.3 or newer (tested on the free 2.2.3 with free Elementor 4.3.5 at desktop width), on WordPress 6.9 or newer, with an administrator account, and a header built in Elementor: a header template from Ultimate Addons for Elementor (tested) or Elementor Pro (not tested), or the top section of a page built in Elementor.

The prompt
My site's header is built in Elementor and Sticky Header Effects for Elementor is installed. It shows on [the address of a page with the header]. Keep the header sticky, but hide it while visitors scroll down and show it again when they scroll up. Start hiding after [scroll distance, for example 300] pixels.

1. Run discover_abilities with category sticky-header-effects. If sticky-header-effects/apply-settings is not listed, run run_wp_cli plugin list and run_wp_cli core version, tell me whether Sticky Header Effects for Elementor (2.2.3 or newer) and Elementor are active and whether WordPress is 6.9 or newer, and stop.
2. Find where my header is built. First, Ultimate Addons for Elementor headers: run run_wp_cli post list --post_type=elementor-hf --post_status=publish --posts_per_page=100 and, for each one, post meta get ID ehf_template_type (type_header is a header). Then, only if run_wp_cli plugin list shows Elementor Pro active, Elementor Pro headers: run post list --post_type=elementor_library --post_status=publish --posts_per_page=100 and, for each one, post meta get ID _elementor_template_type (header is a header; WPVibe has not tested these). Then run get_page_html for the page I named and look at the header at the top of it. It is one of the templates you found only if it contains an element with class elementor-ID, where ID is that template's id. If it is the top of the page's own Elementor content (class elementor-N, where N is the page id, also in the body class page-id-N), use the page. If it holds Elementor content from a post you did not find, another header builder made it and this recipe does not cover it: stop and tell me. If it holds no Elementor content at all (a header tag, .site-header or #masthead with no element of class elementor inside), the theme draws it: stop and tell me this recipe cannot change it. If more than one template matches, ask me which one. Tell me what you found.
3. Read the header with run_wp_cli post meta get ID _elementor_data. Pick the element that is the header: the outermost container or section (its elType) that holds the logo or site name and the menu. If there is none, stop and tell me. Note its id and describe it to me by what is in it. If its settings have sticky set (Elementor Pro's own Sticky, under Advanced > Motion Effects), stop and tell me: WPVibe has not tested the two together. Run sticky-header-effects/list-effects to get the setting keys, and list for me every one of them the element already has, with its value, so we can put them back later. A key missing from the settings means the plugin's default: for transparent (the sticky effect itself) that is off, whatever list-effects says; transparent_on is all three screen sizes and scroll_distance is 60 px. Also list any _tablet or _mobile version of scroll_distance, custom_height_header or scroll_distance_hide_header if you will change that key (for example scroll_distance_mobile): those win on that screen size, the AI cannot change them, and they stay as they are unless I change them in Elementor's responsive view. If the header is not sticky yet, tell me it will become sticky too, and ask which background color it should have once it sticks.
4. Run run_wp_cli option get she_feature_status. If it does not exist, every effect is on. If an effect this needs is set to off there, it is switched off in Elementor > Sticky Header Effects > Header Effects and a setting for it would be saved but do nothing on the page: tell me which one and stop. This needs hide_header (and background_show if you set a color).
5. The settings: hide_header yes, scroll_distance_hide_header with size set to my distance and unit px, and the background_show yes and background color only if I gave you a color. Show me the header, the element (by what is in it, and its id) and the exact settings, and wait for my yes. If the header is a template, say that this changes every page it shows on. Ask me to close the header in Elementor without saving if I have it open, or a later save there will undo this. Then run sticky-header-effects/apply-settings with post_id, element_id and settings. It changes the live header straight away: there is no draft and no revision, and WPVibe shows no approval page for it. It always switches the sticky effect on too. Check applied_keys in the result: a key missing from it was ignored, so tell me.
6. Run sticky-header-effects/validate-demo with the post_id and tell me what it reports. Run run_wp_cli cache purge and tell me what it reported; if it found no cache plugin and my host caches pages, I purge it there. Ask me to scroll the page I named myself. Then tell me how to undo it: run apply-settings again with each changed key set back to its old value, or to an empty string if it had none. apply-settings cannot switch the sticky effect off; for that, open the header in Elementor, go to the Advanced tab, open Sticky Header Effects and switch off Enable.
Already connected?

Skip pasting the full prompt. Drop this into your AI on a site that already has WPVibe:

Run the “Hide Your Header When Visitors Scroll Down with AI” recipe from the WPVibe cookbook on my connected site.

A sticky header is handy, but on a phone it can take a fifth of the screen while someone is trying to read. The usual answer is a header that slides away while visitors scroll down and comes back the moment they scroll up, and setting that up is one more panel nobody gets to.

The AI finds your header, notes its current settings, and after your yes uses Sticky Header Effects for Elementor to hide it on the way down, after the distance you choose, and bring it back on the way up. The header stays sticky, so it is there when visitors want it. The change is live straight away, and the AI tells you how to undo it.

Choose how far visitors scroll before it starts hiding, for example 300 pixels, so the header is still there while they look at the top of the page. It applies on every screen size the sticky header is on, unless the header already has its own distance for tablets or phones, which the AI will point out.

Outcome

A sticky header that hides while visitors scroll down and returns when they scroll up, with a note of how to undo it.