Expand Login Button ❺
Expand Webflow's login/logout button to a surrounding container
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.
- Make your login button include an icon, or additional text
- Create a larger area
- Wrap it in a menu style container
- Add the
wfu-login-buttoncustom 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
This is important, it’s the inner element that the expanded button will perform the log-in / log-out action through.
See above for details.