Stop Menu Links Landing Under Your Sticky Header with AI
The AI leaves room for your sticky Elementor header on every in-page menu jump, after your yes.
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 header must already be sticky, and the menu links must point to sections on the same page (#section).
My site has a sticky header built in Elementor with Sticky Header Effects for Elementor, and its menu links jump to sections on [the address of the page], but each jump lands with the heading hidden under the header. Fix that. [Optional: leave [extra space, for example 20] pixels more.] [Optional: make the jumps scroll smoothly.] 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 transparent is not yes on that element, stop and tell me: this fix only applies to a sticky header, and the sticky header recipe comes first. A tablet or phone value of she_anchor_offset_extra does nothing: the plugin uses only the main one. 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 she_anchor_offset. 5. The settings: she_anchor_offset yes, she_anchor_offset_extra with size set to my extra space and unit px if I gave one, she_anchor_smooth yes if I asked for smooth scrolling. 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. Ask me to click one of the menu links to check that the heading shows below the header.
Skip pasting the full prompt. Drop this into your AI on a site that already has WPVibe:
Run the “Stop Menu Links Landing Under Your Sticky Header with AI” recipe from the WPVibe cookbook on my connected site.
On a one-page site the menu jumps to sections further down: Menu, Prices, Visit us. With a sticky header, each jump lands with the section’s heading hidden behind the header, so visitors see the middle of a paragraph and scroll back up to work out where they are.
Sticky Header Effects for Elementor can leave room for the header on every in-page jump. The AI finds your sticky header, checks your current settings and, after your yes, turns on its anchor scroll fix, with extra space and smooth scrolling if you want them. The change is live straight away, and the AI tells you how to undo it.
This is for links to sections on the same page, such as #prices. If your menu does not have those links yet, the recipe for turning links into on-page anchors sets them up first. If your header also hides on scroll down, a jump down the page hides it, so the extra room shows as a gap above the heading.
Outcome
In-page menu links that land with the section heading in view below the sticky header, with a note of how to undo it.