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