Header
1. What This Page Is For
The Header page allows administrators to choose the desktop and tablet layout for the lobby top bar (Navbar) and game category menu. It gives full control over how your logo, authentication buttons, and game category tabs are positioned and styled, ensuring optimal navigation and brand presentation.
The layout selected on this page applies exclusively to desktop computers and tablets; mobile smartphones automatically use the configuration from the Mobile menu page.
2. Before You Begin
- Permission Requirements: You must have the 'Header' permission in your staff role to view and edit the header layout. (Users without update permission see the page in read-only mode).
- Things to Prepare:
- Verify that your Logo and Theme colour have already been configured so that the preview renders accurately.
- Review your game category list. Sites with numerous categories often benefit from Layout 4 (Side menu) or Layout 5 (Compact buttons).
3. Page Layout and Components
From top to bottom, this page consists of the following sections:
- Page Header: Displays the title Header, subtitle, and navigation breadcrumbs (Settings / Theme / Header).
- Preview Card (Preview on the site): A full-width preview rendering your real logo, active theme colour, and published game tabs at your current monitor width (e.g. 1440px).
- Preview State Toggles: Located at the top right of the preview card:
- Player signed in: Toggles between the visitor view (Sign in and Sign up buttons) and the authenticated member view (Deposit, Withdraw, balance, and account name).
- Fold the side menu: Toggles the sidebar between expanded (224 px) and collapsed (88 px) modes (visible only when Layout 4 is selected).
- Page Audit Bar: Displays the current configuration version, last updater name, updater type, and last update timestamp.
- Layout Selection Grid (Select header layout): 6 layout cards with mini-visualizations and feature descriptions.
- Form Action Bar: Floating bottom bar with Cancel and Save buttons, enabled when an unapplied layout is picked.
4. Search and Filters
There is no table search on this page. Instead, 2 preview toggles allow you to simulate different visitor and player states before saving:
| Toggle Switch | Active State (Enabled) | Inactive State (Default) | Quality Verification Value |
|---|---|---|---|
| Player signed in | Shows Deposit, Withdraw buttons, live wallet balance, and player username | Shows visitor Sign in and Sign up buttons | Ensures financial action buttons do not wrap awkwardly or crowd the logo. |
| Fold the side menu (Layout 4 only) | Collapses the vertical game menu into an 88 px icon strip | Expands the vertical game menu to full 224 px with category labels | Verifies that category icons remain recognizable when players collapse the menu. |
5. Data Table and Layout Cards
6 Available Header Layouts
| Type | Layout Name | Top Bar Structure (Navbar) | Game Menu Structure | Best Suited For |
|---|---|---|---|---|
| 1 | Two bars | Logo on the left; action and member buttons on the right | Large boxed tabs with prominent icons below (96 px height) | Classic casino layout; highly visual and intuitive |
| 2 | Logo in the middle | Logo positioned in center; links and action buttons flank either side | Boxed game tabs like Type 1 below the bar | Sites prioritizing prominent centered brand identity |
| 3 | Tabs | Logo on left; member actions right | Single-line horizontal tabs with a theme-coloured indicator line (72 px) | Sleek, modern, clean, vertical space saving |
| 4 | Side menu | Streamlined top bar focused on player profile and wallet actions | Vertical game menu positioned on the left side (collapsible to 88 px) | Sites with many categories; maximizes lobby height |
| 5 | Compact buttons | Standard top bar with compact game menu | Single-line horizontal rounded pill buttons | Fast, lightweight, mobile-inspired desktop styling |
| 6 | Outlined capsules | Standard top bar with logo and player buttons | Single-line horizontal outlined capsule buttons | Elegant, contemporary minimalist look |
Card Elements and Actions
| Element | Appearance | Result When Clicked | Condition |
|---|---|---|---|
| Layout Card | Clickable rectangular card with preview | Immediately updates the top preview simulation | Clickable at all times |
| In use Badge | Green pill badge | Indicates the layout currently published on the live site | Only 1 card displays this badge |
| Checkmark Badge | Blue circular checkmark | Highlights the currently drafted selection | Appears on the chosen card |
6. Step-by-Step Guide
1. Changing the Header Layout
- Navigate to Site look > Header from the left navigation menu.
- Scroll to the Select header layout section.
- Click your preferred layout card among the 6 options.
- Scroll up to inspect the Preview on the site card.
- Toggle the Player signed in switch to check both visitor and member views.
- Once satisfied, click Save in the bottom action bar.
- A green alert will notify you: "Header layout saved".
2. Discarding Changes Before Saving
- If you tested other layouts and wish to restore the current one, click Cancel in the bottom action bar.
- The selection immediately resets to the layout marked In use.
7. Form Fields and Settings
| Field / Selection | Required? | Description | Example | Constraints |
|---|---|---|---|---|
| Select header layout | Required | Choose 1 of the 6 standardized layout options. | Tabs (Type 3) | Only 1 layout can be active at a time; applies to computers and tablets. |
8. Popups and Confirmation Modals
1. Version Conflict Alert
- Triggered When: Another administrator saved a header layout change before your save request was submitted.
- What You See: A red error snackbar: "Another admin saved the header first. The latest was loaded; please choose again."
- Action Required: The page reloads the newly published layout. Re-select your desired layout and click Save again.
- Result: Prevents concurrent administrators from overwriting each other's configurations unknowingly.
2. Unsaved Changes Guard (Dirty Form Guard)
- Triggered When: You have selected a new layout and attempt to navigate to another page or close the tab without clicking Save.
- What You See: A browser modal warning of unsaved changes.
- Action Required: Click Cancel to remain on the page and save, or confirm navigation to discard the selection.
9. Status Badges and Colors
| Badge / Indicator | Color | Meaning | Required Action |
|---|---|---|---|
| In use | Green | The currently published header layout on the live site. | No action required if you wish to keep this layout. |
| White Checkmark | Blue | The layout currently selected in your draft preview. | Click Save to publish, or click another card to test. |
| Selection Ring | Blue | Focus highlight surrounding the selected card. | Highlights the active draft choice. |
10. Frequently Asked Questions and Troubleshooting
- Why didn't the layout on mobile phones change after saving?
- This setting applies exclusively to desktop computers and tablets. To customize the mobile phone navigation bar, navigate to Site look > Mobile menu.
- Why is the Save button greyed out and unclickable?
- The Save button is only enabled when you select a layout that is different from the one currently marked In use.
- Does Layout 4 (Side menu) cover game thumbnails on smaller laptop screens?
- No. Players can click the collapse button at any time to fold the side menu down to an 88 px icon strip, freeing up ample room for game displays.
- Why does the preview width appear slightly different on different laptops?
- The preview dynamically calculates your actual browser window width (such as 1440px) to provide an exact representation of what players on similar displays will see.