Skip to main content

Navigation Setup

The TabletopForge header features a floating navigation bar with a transparency-to-solid scroll transition, mobile drawer, account links, and a cart icon. This guide walks through configuring all navigation elements.

Creating Your Navigation Menu​

Before configuring the header, create your menu in Shopify Admin:

  1. Go to Online Store → Navigation.

  2. Click Add menu (or edit your existing Main menu).

  3. Add menu items — for a tabletop store, typical items include:

    • Shop All
    • Miniatures
    • STL Files
    • Paints & Tools
    • Blog
    • About

  4. Optionally, nest items under parent links to create dropdown submenus.

  5. Click Save menu and note the menu handle (e.g., main-menu).

Linking the Menu to the Header​

  1. In the Shopify theme editor, click Header in the left sidebar.
  2. Locate the Menu List setting.
  3. Click the dropdown and select your menu handle (e.g., main-menu).

The header will immediately reflect your menu items in the editor preview.

Logo & Branding​

Configure your store's visual identity within the Header section:

SettingDescriptionDefault
Logo ImageUpload your primary shop logo (SVG or PNG recommended)Shop name text
Logo WidthMaximum width of the logo in pixels140px

:::tip Logo best practices Use an SVG or PNG with a transparent background. For the Dark Fantasy preset, a light-colored logo works best against the dark header background. Recommended logo dimensions: width between 120px–200px, height capped at 40px. :::

To upload your logo:

  1. In the theme editor, click Header.
  2. Click Select image under Logo Image.
  3. Upload your file from your computer or select from the Shopify Files library.
  4. Adjust the Logo Width slider to set the display size.

Favicon​

Set your browser tab icon under Theme Settings → Favicon:

  1. Open Theme Settings → Favicon.
  2. Click Select image and upload a square image (recommended: 32×32px or 64×64px .ico or .png).

Header Visual Behavior​

The TabletopForge header has two visual states:

StateBehavior
Transparent (on load)Sits over the top of hero banners with no background color
Solid (on scroll)Transitions to the surface color with backdrop-blur applied

This behavior is automatic and requires no configuration. It works on all page types where a full-bleed hero section is placed at the top.

Mobile Navigation Drawer​

On screens narrower than 1024px, the desktop menu links collapse and a hamburger menu button (☰) appears in the header. Tapping it opens a full-screen mobile drawer with:

  • All navigation links
  • Account link (if customer accounts are enabled)
  • Cart button shortcut

The mobile drawer is built into the mobile-menu snippet and requires no additional setup.

If your Shopify store has customer accounts enabled, a person icon (👤) is automatically rendered in the header:

  • Logged out: Links to /account/login
  • Logged in: Links to /account

To enable customer accounts: go to Shopify Admin → Settings → Customer accounts → select Optional or Required.