I'm building a log in page but ran into an issue with my nav bar. As you can see the "Log In" button appears in two locations.

What's the best way to approach this? To me it looks odd to have it shown twice, yet its a necessary part of the nav bar.

I can correct this by removing the button for just that page...but then that feels like a complicated solution because it requires modifying template code with an if statement.

What should be done here instead?

enter image description here

1 Answer 1


Option 1: Keep only Login in the4 navbar

A common pattern that is used across the board is the use of only the Login CTA in the nav bar. Once in the login screen, the user is given the option to Sign Up or Register if they didn't have an account.

Example: Only login in navbar

Option 2: Keep both, but don't make them buttons

Keep both the Login and the Sign Up in the nav bar but devalue (not have them look like a button) them. Generally, Login is devalued as Sign Up is a way of inviting new users.

Example with both CTA's devalued: Both sign up and login

Example with Login devalued: Navbar with login devalued

Also, a side note: Don't have the forgot password as a button. It should be a link

  • First time hearing of devaluing. Makes a lot of sense and I chose to do the stackexchange style where log in text is not a button but sign up is.
    – SR-117
    Oct 10, 2019 at 5:37

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.