Do you want your navigation menu to look different once your Elementor header becomes sticky? With the Sticky Menu Styling feature, you can override the menu’s link colors, hover and active states, typography, and item spacing – applied only when the header is sticky, so it always stays readable against the sticky background.
With the Sticky Header Effects for Elementor plugin, you can easily style the menu in your Elementor sticky header on scroll.
To check the complete feature overview documentation of Sticky Header Effects for the Elementor plugin, click here.
Requirement – This feature is a part of Sticky Header Effects for Elementor PRO, so make sure both the Free & Pro plugins are installed & activated.
To do this, add the Elementor Container widget, then design the header content as per your requirements or use a header template and follow the steps –
1. Select the main Container widget of the header, then go to the Advanced > Sticky Header Effects tab and turn on the Enable toggle.
2. Turn on the Sticky Menu Styling toggle.
3. Set the menu link colors across the Normal, Hover, and Active tabs (Link Color, Link Hover Color, and Active / Current Color).
4. Adjust the Typography of the menu links for the sticky state.
5. Set the Item Padding to control the spacing around each menu item.
6. Adjust the Transition Duration to control how smoothly the styling eases in and out (default 0.4s).
This feature supports the Elementor Pro Nav Menu, Elementor Mega Menu, the WordPress Menu widget, and The Plus Addons Navigation Menu (Pro & Lite). Other menu widgets may need a little custom CSS.
