In a sticky header, the login button stays in reach while visitors scroll. Headers often change colour when they stick, so the button needs its own colours for that state too.
The Navigation Menu widget makes the header sticky, and the Sticky Navigation Connection option of the WP Login & Register widget from The Plus Addons for Elementor styles the button while the header is stuck.
To check the complete feature overview documentation of The Plus Addons for Elementor WP Login & Register 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 WP Login & Register widget is only part of The Plus Addons for Elementor Pro. The free plugin lists it as a locked Pro widget and does not add it to Elementor.
- Widget to enable: WP Login & Register, switched on under The Plus Addons > Widgets.
- The Navigation Menu widget (Pro) with a WordPress menu, in a header template.
- The Navigation Menu and the WP Login & Register widget in the same container.
Step 1: Make the Header Sticky
- Add the Navigation Menu widget to your header container and choose your menu.
- Open Extra Options and turn on Sticky Menu.
Step 2: Add and Connect the Login Button
- Add the WP Login & Register widget to the same container as the menu.
- In Forms Layout, set Type to Login or Login and Register, and Layout to Button Hover, Button Click or Button Popup.
- Go to Style > Extra Option and turn on Sticky Navigation Connection.
- Under Before Login, set the button’s colours, border and shadow for the Normal and Hover states.
- Under After Login, set the Text Color of the account button members see. Then publish the template.
How It Behaves
- At the top of the page the button keeps its normal style from Hover/Click/Popup Button.
- When the visitor scrolls and the header sticks, the Before Login colours take over.
- For logged-in members, the account button uses the After Login text colour while the header is stuck.
- Scrolling back to the top restores the normal style.
Limitations
- The sticky styles only apply to a login widget inside the container that the Navigation Menu makes sticky. In our test both widgets were in one container.
- Sticky Menu belongs to the Pro Navigation Menu widget; the login widget does not make a header sticky by itself.
- Both widgets are part of The Plus Addons for Elementor Pro.
Troubleshooting
The button does not change colour when the header sticks
Move the WP Login & Register widget into the same container as the Navigation Menu, and check that Sticky Menu is on.
