Webflow Membership + Expand Login Button


Expand the Login Button with a Container

Used to expand Webflow’s current Log-In / Log-Out button with a container To include an icon, etc.

See https://sygnal.com for an example ( top right ).

  • Make your login button include an icon, or additional text
  • Create a larger area
  • Wrap it in a menu style container

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 Button 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

There are currently no configuration options for this library, so we’ll use a no-code integration approach.

Add this CSS script to the HEAD of your site or page.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/sygnaltech/webflow-util@4.11/dist/css/webflow-membership.css">

Add this JS reference to the BODY of your site or page.

<script type="module" src="https://cdn.jsdelivr.net/gh/sygnaltech/webflow-util@4.11/src/nocode/webflow-membership.js"></script>

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

See above for details.