Skip to main content

How can we help?

Search

Setting Up Extended Header Layout

Updated: Andrew Tat Edited:

Required roles: Platform Admin and Theme Developer

The Extended Header Layout is a new option for your Localist calendar that allows you to add custom call-to-action links directly in your calendar's header. This feature gives you greater flexibility to provide your users with quick access to important links like those on your public university website while maintaining your calendar's branding and user experience.

 

Understanding Header Layouts

Localist now offers two header layout options:

Base Layout (Default)

  • Designed to keep the focus on your events
  • Includes your logo, search bar, and user action buttons (like login)
  • Recommended for legacy Localist clients who have customized their header via Developer Theming
  • Clean, minimal design that prioritizes event discovery

Extended Layout

  • Builds on the Base layout by adding an extra row for custom call-to-action links
  • Perfect for highlighting important external links or resources
  • Supports up to 5 top-level links or dropdown menus
  • Fully customizable with your brand's colors and styling

 

Setting Up Your Extended Header

What You'll Need

  • A Localist account with theme access

 

Choosing Your Header Layout

  1. Navigate to Localist Admin > Platform Settings > Appearance
  2. Select your theme and click Edit Theme Settings
  3. You'll be automatically brought to the Header tab

 

In the Header tab, you'll find the Header Layout setting with two options:

  • Base (default)
  • Extended

Select Extended to enable custom header links.

  1. You'll need to Save your changes before you can manage header links. 

Managing Header Links

Once you've selected the Extended layout, you can create and manage your header links using the Header Links table.

 

Adding a Standard Link

  1. In the Header Links table, click Add Header Link
  2. Fill in the following fields:
    • Header Link Name: The text that will display in your header
    • Header Link URL: The destination URL (must include https:// or http://)
    • Dropdown Menu Parent: Leave blank for standalone links
  3. Click Save

Links without a Dropdown Menu Parent will display directly in your header at the top level.

 

Creating a Dropdown Menu

To group multiple links under a dropdown menu:

  1. Click Create Header Dropdown Menu
  2. Enter a Header Dropdown Menu Name (this will display in your header)
  3. Click Save
  4. Now when creating individual links, select this dropdown menu as the Dropdown Menu Parent

Links with a Dropdown Menu Parent set will only appear within that dropdown menu, not as standalone links in the header.

 

Reordering Links

You can reorder your header links by dragging and dropping them in the Header Links table:

  • Top-level links and dropdown menus can be reordered amongst themselves
  • Links within a dropdown menu can only be reordered within that same dropdown menu

 

Editing and Deleting Links

To modify or remove a link:

  • Click the Edit icon to update the link name, URL, or parent dropdown
  • Click the Delete icon to remove the link entirely

 

Important Notes

  • Each theme maintains its own set of header links. When you switch between themes, the header links will change to match the active theme's configuration.

 

Best Practices

  1. Limit Your Links: While you can add up to 5 top-level items, fewer links often create a cleaner, more focused user experience
  2. Use Dropdown Menus Wisely: Group related links together under descriptive dropdown menu names 
  3. Test Your Links: Always verify that your URLs are correct and lead to the intended destination 
  4. Maintain Consistency: Use link names that are clear and consistent with your organization's terminology

Related articles