Customizing App Navigation Header in MemberPress App

Navigation header customization enhances usability and reinforces branding within mobile applications. The app navigation header supports flexible More Menu placement and icon customization. This document explains how to configure header settings, relocate the More Menu, and customize header icons for improved member experience.

Understanding App Navigation Header

The navigation header appears at the top of app screens, displaying page titles and navigation elements. Header configuration controls title alignment, scroll behavior, and More Menu placement. Moving the More Menu from the Tab Bar to the header frees a Tab Bar slot for additional primary navigation. Proper header configuration balances functionality with clean interface design.

Understanding Header Configuration Benefits

Header customization provides multiple usability and branding advantages.

Relocatable More Menu flexibility affects Tab Bar capacity. Moving the More Menu to the header frees the fifth Tab Bar position for primary navigation items.

Tab Bar expansion allows five custom navigation items when More Menu moves to the header. Expanded capacity improves primary navigation access.

Icon customization aligns header appearance with brand identity. Default icons can be replaced with brand-appropriate selections.

Visual consistency maintains More Menu accessibility regardless of location. Members access secondary navigation from a familiar icon.

Accessing Header Bar Settings

Header configuration occurs within the menu settings interface.

1. Navegue até Dashboard > MP App > Menus.
   
2. Clique no botão Header Bar guia.
   
3. Localize o Header Bar Settings seção.

Header Bar settings control alignment, visibility, and More Menu placement.

Configuring Header Alignment

Header alignment affects title positioning and visual balance.

1. Localize o Header Bar Settings seção.
   
2. Select the desired alignment option:
   • Left Aligned keeps page titles aligned to the left;
   • Oculto hides the header is hidden during scroll for expanded content space.

3. Clique em Salvar configurações.

Left alignment maintains consistency with standard mobile design patterns.

Configuring More Menu Placement

More Menu placement determines whether secondary navigation appears in the Tab Bar or header.

1. Navegue até Dashboard > MP App > Menus > Header Bar.
   
2. Localize o More Menu Placement dropdown in Header Bar Settings.
   
3. Select the desired placement:

• Bottom Tab Bar keeps the More Menu in the fifth Tab Bar position;
• Top Header Bar moves the More Menu icon to the header.

4. Clique em Salvar configurações.

More Menu placement affects Tab Bar capacity and overall navigation organization.

Updating Header Menu Items

1. Vá para o Header Bar Menu guia.
   
2. Encontre o More Menu item (usually the user avatar).
   
3. Click the dropdown arrow > Item Icon > Select Icon.
   
4. Choose an icon from the Icon Pack or upload your own.
   
5. Clique no botão Select Icon, then the Salvar menu.
   

Repeat for any action buttons (por exemplo, Create Post, Add Group, Send Message):

• Click their dropdown arrows.
  
• Choose or upload new icons.
  
• Clique no botão Select Icon, then the Salvar menu.

Updating the Tab Bar Menu

1. Switch to the Tab Bar Menu guia.
   
2. If the More Menu is now in the header, click Adicionar ao menu for one more item (e.g., Notificações) from the MemberPress App ou Logged In Member sections.
   
3. Ensure there are no more than four items total in the Tab Bar.
   
4. Clique no botão Salvar menu.

Tab Bar capacity increases only when More Menu successfully moves to the header.