Do you want your header to change colour when visitors scroll? A header that turns solid once it sticks stays readable over every section of the page, and tells visitors the page has moved on.
With the Navigation Menu widget from The Plus Addons for Elementor, you set one colour for the header at the top of the page and another for when it is stuck.
To check the complete feature overview documentation of The Plus Addons for Elementor Navigation Menu widget, click here.
Requirement – This widget is a part of The Plus Addons for Elementor, make sure it’s installed & activated to enjoy all its powers.
Before You Start
- Edition: Pro — the Navigation Menu widget is part of The Plus Addons for Elementor Pro. The free Navigation Menu Lite widget does not have this option.
- Widget to enable: Navigation Menu, switched on under The Plus Addons > Widgets.
- A header template. Add the widget to your site’s header so the menu shows on every page. Build the header with the free Nexter Builder or with Elementor Pro’s Theme Builder.
- A WordPress menu under Appearance > Menus, if you use the Default menu type.
Step 1: Turn on Sticky Menu
Build your header with the Navigation Menu widget in the same container as your logo and buttons. In Content > Extra Options, switch on Sticky Menu.
Step 2: Move the header colour into the widget
If you gave the header container a background in its own Style tab, remove it. Then go to Style > Sticky Main Menu > Section Background Options and set the normal colour on the Normal tab.
A background on the container itself always wins, so the sticky colour would never appear.
Step 3: Set the sticky colour
On the Sticky tab, set Background Type to Classic (or Gradient) and pick a different colour.
Step 4: Keep the text readable
Higher up in the same section, the Normal, Hover and Active tabs set the menu text colours while the header is stuck. Change Normal Color if the text needs more contrast on the new background.
Publish and scroll: the header changes colour as it sticks.
Limitations
- Pro only. Navigation Menu Lite has no sticky options.
- The editor does not scroll the page the way a visitor does. Check sticky effects on the published page.
- The logo does not change by itself. To swap the logo on scroll, see how to change the logo in a sticky header.
Troubleshooting
The colour never changes
If the header container has its own background (container > Style > Background), that background wins over the widget’s Sticky tab. Remove it and set the normal colour in Style > Sticky Main Menu > Section Background Options > Normal instead.
The background changes but the text doesn’t
Set the colours in Style > Sticky Main Menu > Normal / Hover / Active. The Main Menu colours apply until the header sticks; while it is stuck, the Sticky Main Menu colours take over.
