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. Navigieren Sie zu Dashboard > MP App > Menus.
   
2. Klicken Sie auf die Header Bar tab.
   
3. Suchen Sie die Header Bar Settings Abschnitt.

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

Configuring Header Alignment

Header alignment affects title positioning and visual balance.

1. Suchen Sie die Header Bar Settings Abschnitt.
   
2. Select the desired alignment option:
   • Left Aligned keeps page titles aligned to the left;
   • Versteckt hides the header is hidden during scroll for expanded content space.

3. Klicken Sie auf Einstellungen speichern.

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. Navigieren Sie zu Dashboard > MP App > Menus > Header Bar.
   
2. Suchen Sie die 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. Klicken Sie auf Einstellungen speichern.

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

Updating Header Menu Items

1. Gehen Sie zum Header Bar Menu tab.
   
2. Finden Sie die 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. Klicken Sie auf die Select Icon, then the Menü speichern.
   

Repeat for any action buttons (z. B., Create Post, Add Group, Send Message):

• Click their dropdown arrows.
  
• Choose or upload new icons.
  
• Klicken Sie auf die Select Icon, then the Menü speichern.

Updating the Tab Bar Menu

1. Switch to the Tab Bar Menu tab.
   
2. If the More Menu is now in the header, click Zum Menü hinzufügen for one more item (e.g., Benachrichtigungen) from the MemberPress-App oder Logged In Member sections.
   
3. Ensure there are no more than four items total in the Tab Bar.
   
4. Klicken Sie auf die Menü speichern.

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