Expand Login Button ❺

Expand Webflow's login/logout button to a surrounding container

Overview

In Webflow's Memberships BETA [ Jan-2023 ] the login / logout button offers limited styling and sizing options. This presents a problem if you want to position it in your nav menu alongside other items, or display an adjacent icon.

This attribute allows the surrounding container to extend the login/logout element's area.

Use Cases

• Make your login button include an icon, or additional text

• Create a larger area

• Wrap it in a menu style container

Demonstration

See the main Sygnal website for an example ( top right ).

Usage Notes

Create a DIV, with the wfu-login-button attribute

• Add the wfu-login-button custom attribute (no value needed) to identify the clickable “expanded login button” element.

• Include whatever else you want in that button DIV

• Style it however you like

Place the Webflow Log-In / Log-Out element inside of it

This is important, it’s the inner element that the expanded button will perform the log-in / log-out action through.

Getting Started ( NOCODE )

STEP 1 - Add the Library

First, add the library as detailed in Quick Start.

STEP 2 - Apply the custom attributes to the elements you want to affect

See above for details.