--- title: "How to Add an Elementor Login Logout Button in the Header Menu?" url: https://theplusaddons.com/docs/elementor-login-logout-button-in-the-header-menu/ date: 2024-05-17 modified: 2026-09-13 lang: en author: "Aditya Sharma" description: "A header login button should change once someone logs in: visitors need a way in, members need a way to their profile and a way out. The WP Login &..." image: https://theplusaddons.com/wp-content/uploads/2024/05/How-to-Add-an-Elementor-Login-Logout-Button-in-the-Header-Menu_-1024x536.jpg word_count: 528 --- # How to Add an Elementor Login Logout Button in the Header Menu? ## - Integrates the WP Login & Register and Navigation Menu widgets from The Plus Addons for Elementor to add a login/logout button in the header menu. - Utilizes the Nexter Builder or Elementor Pro to create the header template for the login/logout button. - Enables My Account Menu toggle and Logout toggle to display user account options after login. A header login button should change once someone logs in: visitors need a way in, members need a way to their profile and a way out. The **WP Login & Register** widget from The Plus Addons for Elementor does both. Logged-out visitors see a button that opens the login form, and logged-in members see the **My Account Menu** with a **Logout** link. *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**.- A header template built with a theme builder that uses Elementor templates. ## How to Add a Login and Logout Button - Add the **WP Login & Register** widget to your header template.- In **Forms Layout**, set **Type** to **Login** or **Login and Register**.- Set **Layout** to **Button Hover**, **Button Click** or **Button Popup**, and set the button's text in the **Button** section. ![Choosing a button layout for the login form in the widget panel](https://theplusaddons.com/wp-content/uploads/2024/05/wp-login-register-button-hover-3.gif) - Open **My Account Menu** and keep **My Account Menu** on.- Keep **User Avatar**, **User Name** or both on. The account button that members see is made from these two.- Keep **Logout** on and change its **Title** if you like. Then publish the template. ![The My Account Menu section with User Avatar, User Name, Edit Profile and Logout switched on](https://theplusaddons.com/wp-content/uploads/2026/09/login-my-account.webp) ![Turning on the My Account Menu options in the widget panel](https://theplusaddons.com/wp-content/uploads/2024/05/wp-login-register-my-account-logout.gif) ## How It Behaves - Logged-out visitors see the button. Depending on the layout, the login form opens on hover, on click, or in a popup.- After a successful login the page reloads, and the button is replaced by the member's avatar and display name.- The account menu lists **Edit Profile** (the WordPress profile screen), any **Extra Menu** items you added, and **Logout**.- **Logout** logs the member out and brings them back to the same page, where the login button shows again. ![The login form opening from the header button](https://theplusaddons.com/wp-content/uploads/2024/05/wp-login-register-button-hover-login-demo.gif) ![The account menu with the Logout link after logging in](https://theplusaddons.com/wp-content/uploads/2024/05/image.gif) ## Add Your Own Account Links In **My Account Menu > Extra Menu**, click **Add Item**, then set a **Title** and a **Link** for each page, for example your orders or downloads page. The items appear between **Edit Profile** and **Logout**. ## Limitations - If **My Account Menu** is off, logged-in members see nothing at all where the widget is.- **Edit Profile** always opens the WordPress profile screen in the dashboard. Remove it and add your own account page in **Extra Menu** if members should not see the dashboard.- If **Redirect After Login** is on, members land on that page instead of seeing the menu right away.- The widget is part of The Plus Addons for Elementor Pro only. ## Troubleshooting ### Members see an empty space after logging in Turn on **My Account Menu**, and keep **User Avatar** or **User Name** on. ### I can't see the login button while editing You are logged in, so the live site shows your account menu. Check the header in a private browser window. ## Related Docs - [WP Login & Register widget: create a login and register form](https://theplusaddons.com/docs/create-a-login-register-form-in-elementor/)- [Add a login button to the header menu](https://theplusaddons.com/docs/add-a-login-button-to-the-elementor-header-menu/)- [Add a login button to a sticky header](https://theplusaddons.com/docs/add-a-login-button-to-a-sticky-header-in-elementor/)