---
title: "How to add Login Button in WordPress Header Menu?"
url: https://nexterwp.com/docs/add-login-button-in-wordpress-header-menu/
date: 2023-03-04
modified: 2026-09-14
lang: en
author: "Aditya Sharma"
description: "A login button in the header lets people sign in from any page, without being sent to a separate login screen. The Login & Signup block in Nexter Blocks Pro..."
image: https://nexterwp.com/wp-content/uploads/2024/05/add-login-button-in-wordpress-header-menu-1024x519.jpg
word_count: 316
---

# How to add Login Button in WordPress Header Menu?

## Key Takeaways

- Nexter Blocks Pro incluye el bloque Login & Signup con diseño de Button, que abre el formulario en un desplegable desde el encabezado.
- El encabezado muestra solo el botón hasta que el visitante hace clic o pasa el cursor, y después de iniciar sesión el botón se reemplaza por el menú My Account cuando esa opción está activada.
- La configuración exige editar la plantilla de encabezado con Nexter Builder, activar Login & Signup en Nexter > Blocks y elegir Type como Login o Login & Register antes de guardar la plantilla.

A login button in the header lets people sign in from any page, without being sent to a separate login screen.

The Login & Signup block in Nexter Blocks Pro has a Button layout that opens the form in a dropdown.

*For every Login & Signup setting in one place, see the [Login & Signup block guide](https://nexterwp.com/docs/add-login-signup-in-wordpress/).*

[LIVE BLOCK LINK](https://nexterwp.com/nexter-blocks/blocks/wordpress-login-form/)

## Before You Start

- **Edition:** **Pro** — the Login & Signup block is part of Nexter Blocks Pro.- **Block to enable:** Login & Signup, switched on under **Nexter > Blocks** in your WordPress dashboard.- **A header template:** build one with the Nexter Builder so the button shows on every page. See [how to create a header template](https://nexterwp.com/docs/create-header-template-in-wordpress/).

## Steps

- Edit your header template and add the **Login & Signup** block next to your menu.

- In **Forms**, set **Type** to **Login** or **Login & Register**.

![The Forms panel with Type set for the header button](https://nexterwp.com/wp-content/uploads/2026/09/login-signup-form-type.webp)

- Set **Layout** to **Button**.

![Layout set to Button with Button Type, Drop Down Alignment and Button Alignment](https://nexterwp.com/wp-content/uploads/2026/09/login-signup-layout.webp)

- Choose a **Button Type**: **On Click** or **On Hover**, then set **Drop Down Alignment**, **Content Alignment** and **Button Alignment**.

- Open the **Button** tab to change the button text and icon, then save the template.

![A header with a Login/Signup button and the sign-in form open below it](https://nexterwp.com/wp-content/uploads/2026/09/login-signup-fe-button-layout.webp)

## How It Behaves

- The header shows only the button until a visitor clicks or hovers it, then the form opens in a dropdown.- After signing in, the button is replaced by the My Account menu when that option is on.- The dropdown keeps visitors on the page they were reading.

## Limitations

- **Pro only.**- The Button layout is not available for the Forgot Password form type.- In a narrow header, set Drop Down Alignment so the form does not run off the screen.

## Troubleshooting

### The form is always visible instead of a button

Set **Layout** to **Button** in the Forms panel.

### The dropdown is cut off at the edge of the screen

Change **Drop Down Alignment**, or move the block further from the edge of the header.

## Related Docs

- [Login & Signup block: all settings](https://nexterwp.com/docs/add-login-signup-in-wordpress/)- [Redirect users after login](https://nexterwp.com/docs/redirect-after-login-in-wordpress-login-form/)- [Create a custom password reset page](https://nexterwp.com/docs/custom-password-reset-form-page-in-wordpress/)

## Frequently Asked Questions

**Q: What do I need before adding a login button to a WordPress header menu?**
A: Nexter Blocks Pro is the key requirement, because the Login & Signup block lives in Pro. The block also has to be switched on under Nexter > Blocks in your WordPress dashboard, and the button needs a header template built with the Nexter Builder so it appears on every page. That setup matters because the header is what makes the login entry point available site-wide instead of only on one page.

**Q: How do I make a login button open a dropdown form in the header?**
A: The Login & Signup block in Nexter Blocks Pro uses the Button layout for that behavior. In Forms, set Type to Login or Login & Register, then set Layout to Button. From there, choose whether the button opens On Click or On Hover, and adjust Drop Down Alignment, Content Alignment, and Button Alignment so the dropdown sits where you want it in the header.

**Q: Why does my login form show all the time instead of turning into a button?**
A: That usually means the block is not set to Button layout. The tutorial’s fix is simple: in the Forms panel, set Layout to Button. In Nexter Blocks Pro, that setting changes the display from an always-visible form into a compact header button that opens the login form only when a visitor clicks or hovers it.

**Q: What happens after someone logs in from the header button?**
A: The dropdown keeps visitors on the page they were reading, so they do not get pushed to a separate login screen. When the My Account option is on, the button is replaced by the My Account menu after sign-in. That makes this pattern better for headers than a full-page login flow when you want people to stay in context.

**Q: Can I use this login button for Forgot Password forms?**
A: The Button layout does not work with the Forgot Password form type. In this setup, Nexter Blocks Pro only supports Button layout for Login or Login & Register forms. If your goal is password recovery, use [Create a custom password reset page](https://nexterwp.com/docs/custom-password-reset-form-page-in-wordpress/) instead of trying to force it into the header button pattern.

**Q: How do I stop the dropdown from getting cut off in a narrow WordPress header?**
A: Drop Down Alignment is the main control for that problem. In a narrow header, move or align the dropdown so it does not run off the screen, and if needed place the block farther from the edge of the header. That matters because small headers leave very little horizontal room, so alignment becomes part of keeping the form usable instead of clipped.