Skip to main content
On this page

Footer Menu Columns & Badges Configuration Guide

The TanaFlows theme supports automatic column split and highlight badges (such as HOT, NEW, FREE) for the Footer Menu area. You can configure this directly from Ghost Admin without editing any theme code.

1. How the Footer Menu Works in Ghost

  • The theme’s Footer Menu is synced directly from the Secondary Navigation section in Ghost Admin.
  • To set this up, go to Ghost Admin > Settings > Navigation and scroll down to the Secondary Navigation section.

2. Creating Columns and Sub-links in the Footer

The Footer supports multiple parallel link columns. You can use a naming convention with a hyphen - to organize columns and sub-links.

Configuration Rules:

  1. Column Title: Type the name normally (without a leading -). The theme will create a new column using this label as the bold header.
  2. Column Sub-link: Start the label with a hyphen - (e.g., - Sub Link Name). These links will be grouped under the closest Column Title defined above them.
  3. Ordering: Always place Sub-links directly below their respective Column Title in the list.

Real-World Example in Ghost Admin (Secondary Navigation):

  • Explore (Link: #) ← Column 1 Title
  • - About Us (Link: /about/) ← Sub-link of Column 1
  • - Contact (Link: /contact/) ← Sub-link of Column 1
  • Resources (Link: #) ← Column 2 Title (Creates a new column next to Column 1)
  • - Courses (Link: /courses/) ← Sub-link of Column 2
  • - Free Ebook (Link: /free-ebook/) ← Sub-link of Column 2

Result on your Website:

The system automatically splits the footer into 2 separate columns:

  • Column 1 (Explore): Contains 2 sub-links: About Us and Contact (the leading - is automatically hidden).
  • Column 2 (Resources): Contains 2 sub-links: Courses and Free Ebook.

3. Creating Highlight Badges next to Menu Items

You can add eye-catching badges like NEW, HOT, or FREE to both Column Titles and Sub-links in the footer.

Configuration Rules:

Use a vertical bar | in the navigation Label field in Ghost Admin with the following format: Menu_Item_Name|Badge_Text

Real-World Examples in Ghost Admin:

  • For Column Titles: Courses|NEW
    • Result: Bold header Courses with a small, colored NEW badge next to it.
  • For Sub-links: - Notion Templates|FREE
    • Result: Sub-link Notion Templates with a small FREE badge next to it.

4. Advanced Tip: Customizing Column Layouts on Mobile

By default, the footer link columns adapt to a 2-column grid on mobile devices to save space. However, if you have many columns or want an important column to span the entire screen width (full-width), you can use this CSS tweak:

How to do it:

  1. Go to Ghost Admin > Settings > Code Injection.

  2. Paste the following CSS into the Site Header box:

    <style>
      @media screen and (max-width: 767px) {
        /* Force Column 2 and Column 3 to occupy 100% width on mobile */
        div#footer-col-2, div#footer-col-3 {
          grid-column: span 2 / span 2;
        }
      }
    </style>

Explanation:

  • div#footer-col-2, div#footer-col-3: These are the unique IDs representing Column 2 and Column 3 in the Footer.
  • grid-column: span 2 / span 2: Forces the element to expand across both grid tracks (100% width).
  • You can change the column indexes (e.g., div#footer-col-1, div#footer-col-4) depending on which column you want to target.

5. Important Considerations

Sub-link Ordering

Make sure that Sub-links (starting with -) are always placed immediately below their corresponding Column Title in Ghost Admin. If you place a Sub-link at the very beginning of the list without a Column Title above it, a blank column without a title will be rendered.

Testing Changes

After clicking Save in Ghost Admin, refresh your website to inspect the footer layout changes.