---
title: "How to Add a Login Button to a Sticky Header in Elementor?"
url: https://theplusaddons.com/docs/add-a-login-button-to-a-sticky-header-in-elementor/
date: 2024-05-16
modified: 2026-09-13
lang: en
author: "Aditya Sharma"
description: "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..."
image: https://theplusaddons.com/wp-content/uploads/2024/05/How-to-Add-a-Login-Button-to-a-Sticky-Header-in-Elementor_-1024x536.jpg
word_count: 472
---

# How to Add a Login Button to a Sticky Header in Elementor?

## 

- Integrates the WP Login & Register and Navigation Menu widgets from The Plus Addons for Elementor to add a login button to a sticky header.
- Utilizes the Nexter Builder or Elementor Pro to create the header template for the sticky menu.
- Enables the Sticky Menu toggle and configures button styles for normal and hover states in the WP Login & Register widget.

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](https://theplusaddons.com/docs/create-a-login-register-form-in-elementor/).*

***Requirement - This widget is a part of The Plus Addons for Elementor, make sure it's installed & activated to enjoy all its powers.***

[LIVE WIDGET LINK](https://theplusaddons.com/elementor-widget/login-form/?utm_source=tpae&utm_medium=docs&utm_campaign=text)

## 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**.

![Sticky Menu turned on in the Extra Options section of the Navigation Menu widget](https://theplusaddons.com/wp-content/uploads/2026/09/login-nav-sticky.webp)

## 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**.

![Choosing the Login type and a button layout for the header login button](https://theplusaddons.com/wp-content/uploads/2024/05/wp-login-register-button-hover-2.gif)

- 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.

![Sticky Navigation Connection turned on in the Extra Option style section with Before Login colours](https://theplusaddons.com/wp-content/uploads/2026/09/login-sticky-connection.webp)

## 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.

## Related Docs

- [WP Login & Register widget: create a login and register form](https://theplusaddons.com/docs/create-a-login-register-form-in-elementor/)- [Create a sticky menu in Elementor](https://theplusaddons.com/docs/create-a-sticky-menu-in-elementor/)- [Add a login button to the header menu](https://theplusaddons.com/docs/add-a-login-button-to-the-elementor-header-menu/)