Frame your web content with a native top Header Action Bar. Nativine renders native header bars with title text, brand logo graphics, back navigation buttons, and custom action icons.
1. Overview & Header Elements
Native headers provide familiar mobile navigation controls and brand visibility:
- Header Title & Logo: Display your app title text or upload a custom brand header logo PNG image.
- Navigation Controls: Native back button that navigates WebView history automatically.
- Header Action Buttons: Add right-aligned action buttons (Search, Refresh, Share, Notification Bell, Cart, Settings).
- Color Styling: Set custom header background color, title text color, and icon tint to match your brand palette.
2. No-Code App Builder Setup Guide
⚡ Nativine Builder Feature: Custom Header Action Bar is integrated directly into the Nativine native app engine. Configure options natively in the App Builder under Add-ons & Plugins > Native UI.
Nativine App Builder Configuration
- Open the Nativine App Builder at /web-to-app-converter-pro.
- Click Add-ons & Plugins in the left builder menu and locate Custom Header Action Bar.
- Toggle Custom Header Action Bar to ON (or click Enable), then click Config.
- Configure your required settings, permissions descriptors, or target web parameters.
- Click Save Config and navigate to the Builds tab to compile your mobile application.
3. Frequently Asked Questions (Q&A)
Does the back button handle web history automatically?
Yes. Tapping the native back button in the header executes WebView goBack() automatically. If no web history exists, it safely exits or minimizes the app.
Can I hide the header on specific pages of my website?
Yes. You can use the Nativine JS Bridge to dynamically hide or show the native header on specific web page routes.