Goal

Your home screen is the first thing most users see, so it’s worth making it feel like yours. Here’s how to set the nav header’s colors and background image, switch titles to all-caps, scale the logo, and choose the background and section-header colors for the home screen itself.

Every one of these is a no-code setting: change it in the admin, hit save, and the next time the app loads (or someone pulls to refresh) the new look is there — no rebuild needed for color and text changes.

Prerequisites

• A MAM Suite site with MAM Main activated.
• Admin access to Mobile App Manager → App Settings.
• Optional: a header image (PNG/JPG) uploaded to the WordPress Media Library if you want an image behind the nav header instead of a solid color.

The settings below all live on the App Settings page, which organizes everything into tabs. Two of them matter for this guide:

• Nav Header — the bar across the top of every screen.
• Home Screen — the scrolling content area below the nav header, including section headers and the logo.

One more to know about: the home screen background color actually lives on the General Settings tab. These settings are grouped by where they take effect rather than by screen, so don’t be surprised if you find yourself moving between all three tabs.

Steps

1. Set the nav header background and text color

Open App Settings → Nav Header.

• Header Background — the fill color of the top navigation bar. Defaults to black (#000000).
• Header text color — the color of the title text and the icons (back arrow, menu, action icons) in the nav header. Defaults to white (#ffffff).

Pick a background-and-text pair with enough contrast that the title and icons stay easy to read. You can save after each change, or make all your edits and save once at the end — whichever you prefer.

2. Turn header titles all-caps (optional)

Still on the Nav Header tab, set Header Titles in All Caps to Yes and every top-navigation title switches to uppercase. It’s an app-wide styling choice — there’s no way to turn it on for just one screen. Leave it at No to keep titles in their normal case, which is also the default.

3. Add an image behind the nav header (optional)

Want something more than a flat color? On the Nav Header tab, use Image for Nav Header to pick an image from the Media Library to sit behind the navigation bar instead.

Two more settings control where that image shows up:

• Use Nav View Image on All Screens? — Yes shows the header image on every screen; No keeps it limited to the screens where a header image is meant to appear. Default is No.
• Use transparent Header — lets content show through the header area. Useful when the header image is meant to blend into a full-bleed hero at the top of the home screen. Default is No.

Worth knowing: a header image sits on top of the Header Background color, so that color still matters — it’s what shows before the image loads, or if no image is set at all. And whichever image you choose, make sure the text color stays readable against it.

4. Set the home screen background color

Open App Settings → General Settings and set Home screen background color — this is what shows behind the scrolling home-screen content. It defaults to white (#ffffff).

If your home screen includes a header image or full-bleed sections, pick a background color that matches the bottom edge of that artwork so the transition stays invisible.

5. Scale and position the logo

Open App Settings → Home Screen.

• Logo Scaling (%) — a percentage that scales the logo up or down. Enter a number only (for example 80 for 80% of its natural size). Leave blank to use the default size.
• Logo Top Offset (px) — a vertical offset, in pixels, that pushes the logo down from the top. Enter a number only.

These two work together, so adjust them as a pair — get the size right with scaling first, then nudge the offset until the logo sits where you want it relative to the header and the first content section.

The logo image itself gets uploaded elsewhere, as part of your app’s branding/onboarding setup, not on this tab. These two settings only control its size and vertical position, so if you haven’t set a logo yet, there’s nothing here for them to act on.

6. Style the home section headers

Your home screen organizes content into sections — a Featured section and a Check In section, for example — and each one has its own header bar. On the Home Screen tab:

• Home Section Header Background Color — fill color of those section header bars. Default white (#ffffff).
• Home Section Header Text Color — color of the section title text. Default black (#000000).

Don’t confuse these with the Nav Header colors from Step 1 — the nav header is the single bar at the very top of the app, while section headers are the smaller dividers between groups of home-screen content.

While you’re on this tab, you can also rename the built-in sections using Featured section title and Check In section title, if you’re using them.

7. Save and verify on a device

Save the page, then open the app and load (or pull to refresh) the home screen to see how the colors, the all-caps titles, the header image, and the logo’s size and position all come together.

Color and text changes take effect the next time the app loads or refreshes. If you added or changed a header image and it’s not showing up, double-check that the image actually saved to the Media Library, then re-check the “use on all screens” and transparent-header options back in Step 3.

Tips

• Contrast first. The most common misstep is a header text color that disappears against the header background or header image. Set the pair together and check them on a real device, not just the admin preview.
• One source of truth for color. The nav header colors, home background, and section-header colors are independent settings — changing one won’t touch the others, so if part of the screen looks off, check which of the three tabs owns that element.
• Numbers only for scaling/offset. Logo Scaling and Logo Top Offset expect a bare number, not a % or px suffix.

Related

• App Setting Reference: home_section_header_color — Home Section Header Background Color
• App Setting Reference: home_section_header_text_color — Home Section Header Text Color
• App Setting Reference: logo_scaling — Logo Scaling (%)
• App Setting Reference: splash_screen_logo_top_offset — Logo Top Offset (px)
• App Setting Reference: home_background_color — Home screen background color

What’s next

• Configure the bottom tab bar’s colors and icons (App Settings → Bottom Tab Bar) so your top and bottom chrome match.
• Choose your Home Screen View layout and arrange the home content sections that the section headers from Step 6 style.