Help Center
    Help Center
  1. Managing your business
  2. Building your community
  3. Site Members
  4. Customizing your Members Area
    5. Site Members: Customizing the Login Bar and Menu

Site Members: Customizing the Login Bar and Menu

8 min read
This article refers to the new version of the Members Area app which is not available to all users yet. If you're using the previous version, read the information here. Click here to check which version you're using.
Customize the login bar that members click to sign in to your Members Area, and the menu that it displays. Decide which tabs and links appear on the menu, adjust the layout and design the element to match the rest of the site. 
In this article, learn how to:
Tip:
The Login Bar element was automatically added to your site as part of the Members Area app. It's also available in the Add Elements panel under Community (Wix Editor) / Members (Studio Editor).

Setting up the login bar

Choose what information the Login Bar displays, personalize the texts and add a greeting for a friendly touch (e.g. "Hey there Lisa!").
Wix Editor
Studio Editor
  1. Click the Login Bar element in the Editor.
  2. Click Set Up Login Bar.
  3. Choose what people see on the Login Bar under Select layout:
    • Avatar: Only the member's profile picture is displayed.
    • Name: Only the member's name is displayed.
    • Initials: The member's initials are displayed, based on their first and last name.
    • Full: The member's profile picture and name are displayed. 
  4. (Optional) Enable the Show greeting before name toggle to add a greeting before your member's name. Then, enter your greeting text.
    Note: This option is only available for the Name and Full layouts.
  5. Edit the text on the Login Bar:
    • What does the bar say before login?: Edit the text that appears before members log in. This helps your site visitors know what to do (e.g., Sign Up, Log In).
    • What's the logout message?: Edit the text that members click to sign out of their account.
The Login Bar Settings panel in Wix Editor

Managing the Login Bar Menu

When logged-in members click the login bar, a drop-down menu opens. The Login Bar Menu is fully customizable and completely independent from the Member Menu. Choose which member tabs and pages you want this menu to show. 
Tip:
While you can only show tabs in the Member Menu, the Login Bar Menu can link anywhere, including your private member pages.  
Wix Editor
Studio Editor
  1. Click the Login Bar element in the Editor.
  2. Click Manage Menu.
  3. Choose what to do next:
    • Add more menu items: 
      1. Click + Add Menu Item at the bottom.
      2. Click Link.
      3. Choose where you want to link to (e.g. site page, external web address) and set it up using the available options.
      4. 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 Remove / Hide from menu.
    • Reorder the menu: Hover over the relevant item, hold the Reorder icon  next to it and drag it to the desired position.
The Manage Menu panel for the Login Bar Menu in Wix Editor

Designing the Login Bar and Menu

Customize the design of your Login Bar and the Member Menu so they fit your site's theme. You can change the colors, fonts, borders and much more. 
Wix Editor
Studio Editor
  1. Click the Login Bar in the Editor.
  2. Click the Design icon .
  3. 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.
  4. Click the Hover and Selected tabs to select a different color for your text when members hover over or select it.
A screenshot of the Login Bar design panel where you can customize the Login Bar and Menu

Adjusting the layout of the Login Bar and Menu

Adjust the layout of the Login Bar, as well as the drop-down menu that appears. You can choose which icons to show on the Login Bar, change their size, control text alignment and more.  
Note:
The available options depend on the layout you select in the Login Bar Settings panel. 
Wix Editor
Studio Editor
  1. Click the Login Bar in the Editor.
  2. Click the Layout icon  .
  3. Adjust the layout using these options:
    • Avatar size: Drag the slider to change the size of the member's profile pic on the Login Bar.
    • Arrow shape: Choose a shape for the arrow visitors click to open the Login Bar Menu. Then drag the Arrow size slider to change the size of the arrow.
    • Align: Choose how to align the text on the Login Bar Menu: Left, Center or Right.
    • How is the login bar arranged?: Choose whether the avatar, name and arrow on your Login Bar are arranged from left-to-right or right-to-left.
The Login Bar Layout panel in Wix Editor

Did this help?

|
In this article
  • Setting up the login bar
  • Managing the Login Bar Menu
  • Designing the Login Bar and Menu
  • Adjusting the layout of the Login Bar and Menu

Hire a Professional

Get matched with a Wix Partner who can help you reach your site goals.
Get Matched