Site Members: Customizing Your Login Bar
6 min read
In this article
- Setting up the login bar
- Managing the login bar menu
- Designing the login bar
Customize the login bar that members use to sign in to your Members Area, along with the menu it displays. You can decide which tabs and links appear on the menu, adjust the layout, and design the element to ensure it matches the overall style of your site.
Tip:
The login bar element is automatically added to your site when you set up the Members Area app. You can also find it in the Add Elements panel under Community in the Wix Editor or under Members in the Studio Editor.
Setting up the login bar
Select the information you want the login bar to display, customize the text, and add a friendly greeting, such as "Hey there, Lisa!" This personal touch can help create a welcoming experience for your members.
Wix Editor
Studio Editor
- Click the Login Bar element in your Editor.
- Click Set Up Login Bar.
- Select the relevant login bar state: Logged-in or Logged-out:
- Customize the Logged-in version of your login bar:
- Appearance: Choose an avatar, full, or text style. If using an avatar, select an image, Initials, or custom style and adjust its size. For text and full styles, add custom button text. Choose an arrow style and size. Optionally show a greeting before the member's name and display a notification bell icon.
- Layout: Select the login bar alignment and element direction.
- Dropdown menu: Select the items alignment and change the logout button text.
- Customize the Logged-out version of your login bar:
- Choose an avatar, full, or text style. If using an avatar, select an image, Initials, or custom style and adjust its size. For text and full styles, add custom button text.
- Customize the Logged-in version of your login bar:
Managing the login bar menu
When logged-in members click the login bar, a drop-down menu opens. You can choose which member tabs and pages you want to display in this menu.
Wix Editor
Studio Editor
- Click the Login Bar element in the Editor.
- Click Manage Menu.
- Choose what you want to do next:
- Add more menu items:
- Click + Add Menu Item at the bottom.
- Click Link.
- Choose where you want to link to (e.g. site page, external web address) and set it up using the available options.
- Click Done.
- Rename a menu item: Double-click the menu item to enter a new name for it.
- Remove a menu item: Hover over a tab, click the More Actions icon
and select Remove / Hide from menu. - Reorder the menu: Hover over the relevant item, hold the Reorder icon
next to it and drag it to the relevant position.
- Add more menu items:
Designing the login bar
Customize the design of your login bar to match your site's theme. You can change the colors, fonts, borders, and more to create a cohesive look.
Wix Editor
Studio Editor
- Click the Login Bar in the Editor.
- Click the Design icon
. - Click the Regular tab and customize the design using the following options:
- Fill Color & Opacity: Change the colors and opacity of the icons, background and notifications on the Login Bar.
- Borders: Change the color, opacity and width of the Login Bar and menu borders.
- Corners: Change the corner radius of the Login Bar and menu. The bigger the radius, the rounder the corners.
- Shadow: Add and design a shadow for your Login Bar and menu.
- Text: Change the colors and fonts of the text on the Login Bar and menu.
- Click the Hover and Selected tabs to update the text color when members hover over or select it.
