Skip to content

Navigation and Footer Configuration Tutorial

Last Updated: January 2025
Target Audience: CMS Content Editors
Content Types: Navigation Config, Footer Config

Table of Contents

  1. Overview
  2. Accessing the Content Types
  3. Configuring Site Navigation
  4. Configuring Site Footer
  5. Multi-Language Support
  6. Best Practices
  7. Troubleshooting
  8. Quick Reference

Overview

This tutorial explains how to manage the site's navigation menu (header) and footer content through Strapi CMS. These are global components that appear on every page of the website.

What You Can Manage

Navigation (Header): - Site logo (image) - Logo text - Navigation menu items (links, labels, order)

Footer: - Brand name and description - Footer logo - Quick links section - Destinations links (connected to destination content) - Company links section - Social media links - Contact information - Copyright text - Legal links (Privacy Policy, Terms, etc.)

Accessing the Content Types

  1. Log in to your Strapi CMS admin panel
  2. Navigate to Content Manager in the left sidebar
  3. Click on Single Types (not Collection Types)
  4. You'll see two options:
  5. Navigation Config - For header/navigation settings
  6. Footer Config - For footer settings

Note: These are "Single Types" because there's only one navigation and one footer configuration for the entire site (per language).

Configuring Site Navigation

Step 1: Open Navigation Config

  1. Go to Content Manager → Single Types → Navigation Config
  2. If this is your first time, you'll see an empty form
  3. Click "Create new entry" or edit the existing entry

Step 2: Upload Logo (Optional)

  1. In the Logo field, click "Click to add an asset" or "Drop files here"
  2. Upload your logo image (recommended formats: PNG, SVG, or JPG)
  3. Recommended size: 200x50px or similar aspect ratio
  4. The logo will appear in the header next to the logo text

Tip: If you don't upload a logo, the system will display a default compass icon.

Step 3: Set Logo Text

  1. In the Logo Text field, enter your brand name
  2. Default: "Portugal Odyssey"
  3. This text appears next to the logo in the header
  4. Supports multi-language (see Multi-Language Support)

Step 4: Add Navigation Items

Navigation items are the menu links that appear in the header.

  1. Scroll to the Nav Items section
  2. Click "Add an entry" to add a new navigation item
  3. For each navigation item, fill in:
  4. Label: The text that appears in the menu (e.g., "Home", "About Us", "Contact")
  5. Href: The URL path (e.g., "/", "/about", "/contact")
  6. Order: A number to control the display order (lower numbers appear first)
Label Href Order Description
Home / 1 Homepage link
Experiences /experiences 2 Experiences listing page
About /about 3 About page
Blog /blog 4 Blog/stories page
FAQ /faq 5 FAQ page
Contact /contact 6 Contact page
  1. Click "Add another entry" to add more items
  2. Use the drag handle (⋮⋮) to reorder items, or adjust the Order number
  3. Click the trash icon (🗑️) to remove an item

Important: - Use relative paths starting with / for internal pages (e.g., /about) - Use full URLs for external links (e.g., https://example.com) - The Order field determines the left-to-right sequence in the menu

Step 5: Save and Publish

  1. Click "Save" to save your changes (draft)
  2. Click "Publish" to make the changes live on the website
  3. Changes appear immediately after publishing
  1. Go to Content Manager → Single Types → Footer Config
  2. Click "Create new entry" or edit the existing entry

Step 2: Brand Information

  1. Brand Name: Enter your company/brand name (default: "Portugal Odyssey")
  2. Brand Description: Enter a short description about your company
  3. Supports rich text formatting (bold, italic, links)
  4. This appears below the logo in the footer

  5. Leave empty to use default i18n translation

  6. Logo: Upload a footer logo (optional)

  7. Can be different from the header logo
  8. Recommended size: 200x50px

Quick links are typically links to main pages (Home, Experiences, About, Contact).

  1. Scroll to Quick Links
  2. Click "Add an entry" for each link
  3. Fill in:
  4. Label: Link text (e.g., "Home", "About Us")
  5. Href: URL path (e.g., "/", "/about")

  6. Order: Display order (1, 2, 3...)

  7. Add multiple entries as needed

  8. Reorder using drag handle or Order numbers

Step 4: Destinations Section

The destinations section displays links to destination pages. These are connected to the Destination content type.

  1. Scroll to Destinations
  2. Click "Add an entry" or "Click to select"
  3. Search and select existing destinations from your Destination collection
  4. The system will automatically display the destination name and create a link to /destinations/{slug}

Note: You must create destinations in the Destination collection type first before linking them here.

Company links are typically links to company-related pages (About Us, Careers, Press, Become a Partner).

  1. Scroll to Company Links
  2. Click "Add an entry" for each link
  3. Fill in:
  4. Label: Link text (e.g., "About Us", "Become a Partner")
  5. Href: URL path (e.g., "/about", "/become-partner")
  6. Order: Display order

Add links to your social media profiles.

  1. Scroll to Social Links
  2. Click "Add an entry" for each social platform
  3. Fill in:
  4. Platform: Select from dropdown:
    • Instagram
    • Facebook
    • Twitter
    • LinkedIn
    • YouTube
    • TikTok
    • Pinterest
  5. Href: Full URL to your social media profile (e.g., https://instagram.com/portugalodyssey)
  6. Label: Optional label (defaults to platform name if empty)
  7. Order: Display order

Social Media Examples

Platform Href Example
Instagram https://instagram.com/portugalodyssey
Facebook https://facebook.com/portugalodyssey
Twitter https://twitter.com/portugalodyssey
LinkedIn https://linkedin.com/company/portugalodyssey

Step 7: Contact Information

Add contact details that appear in the footer.

  1. Scroll to Contact Info
  2. Fill in the available fields:
  3. Phone: Phone number (e.g., "+351 220 123 456")
  4. Email: Email address (e.g., "info@portugalodyssey.com")
  5. WhatsApp: WhatsApp number (optional)

  6. Emergency Phone: Emergency contact number (optional)

  7. Address (component):

  8. Street: Street address
  9. City: City name
  10. Postal Code: Postal/ZIP code

  11. Country: Country name (default: "Portugal")

  12. Business Hours (component):

  13. Fill in hours for each day (e.g., "9:00 AM - 6:00 PM")
  14. Leave empty if not applicable

Step 8: Copyright Text

  1. Scroll to Copyright Text
  2. Enter your copyright notice
  3. Default: "© 2025 Portugal Odyssey. All rights reserved."
  4. Supports multi-language

Add links to legal pages (Privacy Policy, Terms of Service, Cookies Policy).

  1. Scroll to Legal Links
  2. Click "Add an entry" for each legal page
  3. Fill in:
  4. Label: Link text (e.g., "Privacy Policy", "Terms of Service")
  5. Href: URL path (e.g., "/privacy", "/terms")
  6. Order: Display order

Step 10: Save and Publish

  1. Click "Save" to save your changes (draft)
  2. Click "Publish" to make the changes live
  3. Verify changes on the website

Multi-Language Support

Both Navigation Config and Footer Config support multiple languages.

Switching Languages

  1. In the content editor, look for the language selector (usually in the top right)
  2. Click to see available languages:
  3. English (en)
  4. Portuguese (pt)
  5. Spanish (es)

  6. French (fr)

  7. Select a language to edit content for that locale

  8. Each language has its own content - you must configure each separately

Language-Specific Fields

The following fields support multi-language: - Navigation Config: - Logo Text - Nav Items → Label

  • Footer Config:
  • Brand Name
  • Brand Description
  • Quick Links → Label
  • Company Links → Label
  • Legal Links → Label
  • Copyright Text

Best Practice for Multi-Language

  1. Start with your primary language (usually English or Portuguese)
  2. Complete all fields for the primary language
  3. Switch to other languages and translate content
  4. Maintain the same structure (same number of nav items, same sections)
  5. Keep Order numbers consistent across languages for easier maintenance

Best Practices

  1. Keep it simple: Limit to 5-7 main navigation items
  2. Logical order: Place most important items first (Home, main pages)
  3. Clear labels: Use concise, descriptive labels (max 2-3 words)
  4. Consistent naming: Use the same labels across all languages
  5. Test links: Always verify that href paths are correct
  1. Organize sections: Group related links together
  2. Complete information: Fill in all relevant contact information
  3. Social media: Include all active social media profiles
  4. Legal compliance: Ensure legal links are present and correct
  5. Consistent branding: Use the same brand name and logo across all languages

General

  1. Save drafts frequently: Use "Save" before "Publish" to avoid losing work
  2. Preview before publishing: Check content in the CMS preview if available
  3. Test on website: After publishing, verify changes appear correctly
  4. Document changes: Keep notes of what was changed and when
  5. Backup important content: Copy important text before making major changes

Troubleshooting

Problem: Navigation items don't show on the website.

Solutions: 1. Check that content is Published (not just saved as draft) 2. Verify the Order field is set (should be 1, 2, 3...) 3. Ensure Label and Href fields are filled in 4. Check browser cache - try hard refresh (Ctrl+F5 or Cmd+Shift+R) 5. Verify the correct language is selected

Logo not displaying

Problem: Logo doesn't appear in header/footer.

Solutions: 1. Check that image was uploaded successfully 2. Verify image format is supported (PNG, JPG, SVG) 3. Ensure image is published (not in draft) 4. Check image file size (should be under 2MB) 5. Try re-uploading the image

Problem: Footer sections don't appear.

Solutions: 1. Check that sections have entries (Quick Links, Company Links, etc.) 2. Verify entries are Published 3. Ensure Order fields are set 4. Check that Label and Href are filled in 5. Some sections are optional - empty sections won't display (this is normal)

Social media icons wrong

Problem: Wrong icon appears for social platform.

Solutions: 1. Verify Platform dropdown matches the actual platform 2. Check that Href URL is correct for that platform 3. Ensure platform name matches exactly (case-sensitive)

Multi-language content not showing

Problem: Content appears in wrong language or default language.

Solutions: 1. Verify you're editing the correct language in CMS 2. Check that content is published for that language 3. Ensure website language selector is set correctly 4. Clear browser cache and cookies 5. Check that i18n plugin is enabled in Strapi

Problem: Navigation or footer links don't work when clicked.

Solutions: 1. Verify Href field format: - Internal links: Start with / (e.g., /about) - External links: Include https:// (e.g., https://example.com) 2. Check for typos in URLs 3. Verify the target page exists 4. Test links in browser address bar

Quick Reference

Field Type Required Description
Logo Media (Image) No Header logo image
Logo Text Text No Brand name text
Nav Items Component (Repeatable) No Navigation menu items
└─ Label Text Yes Menu item text
└─ Href Text Yes URL path
└─ Order Number Yes Display order
Field Type Required Description
Brand Name Text No Company/brand name
Brand Description Rich Text No Company description
Logo Media (Image) No Footer logo
Quick Links Component (Repeatable) No Quick navigation links
Destinations Relation No Links to destinations
Company Links Component (Repeatable) No Company-related links
Social Links Component (Repeatable) No Social media profiles
Contact Info Component No Contact details
Copyright Text Text No Copyright notice
Legal Links Component (Repeatable) No Legal page links

Common URL Paths

Page URL Path
Homepage /
Experiences /experiences
About /about
Blog/Stories /blog
FAQ /faq
Contact /contact
Become Partner /become-partner
Start Journey /start-journey
Destination (example) /destinations/porto

Social Media Platform Options

  • Instagram
  • Facebook
  • Twitter
  • LinkedIn
  • YouTube
  • TikTok
  • Pinterest

Additional Resources

  • Strapi Documentation: https://docs.strapi.io
  • Content Manager Guide: See Strapi admin panel help section
  • Media Library: Use Strapi Media Library to manage images
  • i18n Plugin: See Strapi i18n documentation for multi-language setup

Support

If you encounter issues not covered in this tutorial:

  1. Check the Troubleshooting section
  2. Review Strapi documentation
  3. Contact your development team
  4. Check website error logs (if accessible)

End of Tutorial