Folex Theme Documentation

Customizing the Header

The header contains following essential elements that you can customize using the links below:

• Logo – Update your site’s logo
• Menus – Organize and manage navigation menus
• Internationalization (i18n) – Enable multiple languages
• Navigation Button – Customize the call-to-action button (see below).
• Sidebar (Offcanvas) Content – Customize the sidebar content (see below).
  • Contact Info – Easily manage your site’s email, phone number, and address: Customize Global Contact Information

Customizing the Navigation Button

The navigation button is typically displayed in the top-right corner of the header and is useful for highlighting a call-to-action like “Contact”, “Get Started”, or “Hire Me”.

To configure the navigation button:

1. Open the configuration file:
   Navigate to src/config/config.toml.

2. Locate the [settings.navigationButton] section:

   # Navigation Button In Header
   [settings.navigationButton]
   enable = true
   label  = "" # Check src/i18n/en.json and src/i18n/fr.json for changing the button label in different languages or directly add value here if you are not using internationalization feature
   url    = "/contact/"

   • enable: Set to false to hide the navigation button completely.
   • label: The text shown on the button. If multilingual is enabled, update the value from language files like src/i18n/en.json and src/i18n/fr.json.
   • url: The page link that the button redirects to when clicked.

💡 Tip: If you’re using internationalization, update the label in your language files. Example (src/i18n/en.json):

"navigation": {
  "buttonLabel": "Get Started"
}

Then in your config:

label = "" # Uses localized value from en.json and fr.json

Customizing the Sidebar (Offcanvas) Content

The sidebar (offcanvas) appears on smaller screens and is also accessible via the menu icon on desktop (depending on your layout). You can customize its content easily from the configuration file.

To update the content shown in the offcanvas:

1. Open the configuration file:
   Go to src/config/config.toml.

2. Locate the [settings.headerOffcanvas] section:
   Here you can configure the sidebar’s logo, description, and button. Example:

    # Header Offcanvas Configuration
    # Update social links in `src/config/social.json`
    [settings.headerOffcanvas]
      enable = true
      logo = "/images/logo-light.svg"
      description = "" # Check src/i18n/en.json and src/i18n/fr.json for changing the description in different languages or directly add value here if you are not using internationalization feature. This is also used in footer of personal-portfolio homepage
   
      # Call To Action Button
      [settings.headerOffcanvas.button]
        enable = true
        label = "" # Check src/i18n/en.json and src/i18n/fr.json for changing the button label in different languages or directly add value here if you are not using internationalization feature
        url = "/contact/"

   • enable: Set to false to disable the sidebar entirely.
   • logo: Path to the logo shown in the sidebar.
   • description: A brief text that introduces your brand or site. Useful for personal portfolio homepages.
   • button: A call-to-action button you can show at the bottom of the sidebar.

3. Save and restart:
   After making changes, restart your development server to see the updates live.

💡 Tip: You can localize the description and label values using the language-specific JSON files.

Example for English (src/i18n/en.json):

"headerOffcanvas": {
  "description": "We are a digital agency that helps businesses create immersive experiences.",
  "buttonLabel": "Let’s Talk With Us"
}

And reference them in config.toml like this:

description = "" # Uses localized value from src/i18n/en.json and src/i18n/fr.json
[settings.headerOffcanvas.button]
  label = "" # Uses localized value from src/i18n/en.json and src/i18n/fr.json

If you’re not using internationalization, you can directly enter text values into the config file instead.