---
title: "Header: Mobile Navigation"
slug: "header-mobile-navigation"
updated: 2026-10-20T19:32:54Z
published: 2026-10-20T19:32:54Z
canonical: "docs.blackthorn.io/header-mobile-navigation"
---

> ## Documentation Index
> Fetch the complete documentation index at: https://docs.blackthorn.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Header: Mobile Navigation

![Mobile bottom navigation bar: Register button, Home/About/Tickets nav items with icons](https://cdn.document360.io/f977eec0-500f-40a3-b663-724a51f78075/Images/Documentation/f2-header-mobile-nav.png)

Mobile bottom navigation bar: Register button, Home/About/Tickets nav items with icons

Page Designer

On mobile viewports, the Header can switch from a top hamburger menu to a **fixed bottom navigation bar**: the familiar iOS/Android pattern that keeps key actions one thumb-tap away.

Enable mobile bottom navigation (Visibility tab)
The toggle that activates the bottom bar. When **on**, nav items and the Register button move to a fixed tab bar pinned to the bottom edge of the screen on mobile. The top of the header retains only the logo and language selector: no hamburger icon.

Hide navigation icons on desktop (Visibility tab)
Icons assigned to nav items still appear in the mobile bottom bar even when this toggle hides them on desktop. This lets you show a clean text-only nav on desktop while keeping the icon-driven bottom bar on mobile.

Nav item icons
Each nav item can have its own icon (set in the Navigation tab → Icon picker). In the mobile bottom bar, the icon appears above the label. This is the primary visual that visitors tap. Choose icons that match the destination: a house for Home, a calendar for Schedule, a ticket for Tickets.

Register button in the bottom bar
When the bottom bar is active, the Register button moves into the bar as a full-width prominent button above the nav items (as shown in the screenshot). It remains visually distinct from the nav tabs so visitors always know where to go to sign up.

Active item highlight
The currently active nav item is underlined and tinted with your primary color. Set which item is active using the **Set as Active** toggle on each nav item (Navigation tab).

💡Always assign icons to your nav items before enabling the mobile bottom bar: the icon is the main visual cue on small screens, and text-only bottom bars feel incomplete.