CivicTheme
  • Docs
  • Changelog
  • Getting started
    • Introduction
    • Installation
    • Getting help
    • Security policy
    • Partnerships
  • Installation
    • Drupal theme
  • Contributing
    • Contribution model
    • Contribution basics
    • Small contribution spec
    • Medium contribution spec
    • Major (RFC-level) contribution spec
    • Code of conduct
    • Figma contributions
  • Components
    • Component list
  • Content Authoring
    • Overview
    • Global settings
      • Favicon
      • Header
        • Site slogan
        • Header logos
        • Primary navigation
        • Secondary navigation
      • Banner
      • Search
      • Link
      • Skip link
      • Side navigation
      • Signup
      • Footer
        • Footer logo
        • Social links
        • Footer navigation
        • Acknowledgement of Country
        • Copyright
      • Colours
    • Content types
      • Page
        • Configure the banner
      • Event
      • Alert
    • Content components
      • Accordion
      • Automated list
      • Attachment
      • Callout
      • Campaign
      • Content
        • Quote
      • iFrame
      • Manual List
        • Event card
        • Event reference card
        • Navigation card
        • Navigation reference card
        • Promo card
        • Promo reference card
        • Publication card
        • Service card
        • Subject card
        • Subject reference card
        • Snippet
      • Map
      • Next step
      • Promo
      • Slider
      • Webform
    • Vocabularies
      • Topics
      • Site sections
    • User accounts & roles
Powered by GitBook
On this page
  • Configuring the footer logo
  • Examples
  • Logo examples in the footer

Was this helpful?

Edit on GitHub
Export as PDF
  1. Content Authoring
  2. Global settings
  3. Footer

Footer logo

PreviousFooterNextSocial links

Last updated 4 months ago

Was this helpful?

Like the header logo, the footer logo can be configured in a number of different ways. If you have uploaded two logos to your site, on mobile devices they will always stack if you select a logo style that displays two logos.

Configuring the footer logo

The same logos are used in the header and the footer. These instructions presume you have already added logos to the site and just need to configure the display.

  1. Go to /admin/appearance/settings/<site-name> or "Appearance" in the menu, find your site and select "Settings".

  2. Scroll down the page until you see the "Components" section, and select "Footer".

  3. Select from the "Logo type" options:

    • Default

    • Stacked (requires two logos)

    • Inline

    • Inline stacked (requires two logos)

Examples

This table shows the layout of the logos at a glance. In all cases, two logos have been uploaded to the site, but the Footer logo settings determine if both logos or only the Primary logo displays.

Logo type

Final output (desktop)

Final output (mobile)

Default Uses the Primary logo only

Stacked Uses both the Primary & Secondary logos

Inline Desktop uses both Primary & Secondary. Mobile uses Primary only.

Inline stacked Desktop (inline) & mobile (stacked) both use both Primary & Secondary logos.

Logo examples in the footer

Light theme 'Default' desktop

If you have uploaded two logos to your site and you select 'Default', only the Primary logo displays.

Light theme 'Default' mobile

Social media links and partial footer menu shown here for context.

Light theme 'Stacked' desktop

Light theme 'Stacked' mobile

Dark theme 'Inline' desktop

Dark theme 'Inline' mobile

If you have uploaded two logos to your site, and you select 'Inline', only the Primary logo will display.

Dark theme 'Inline stacked' desktop

Dark theme 'Inline stacked' mobile

If two logos have been added to your site, they will 'stack' when 'Inline' style is selected.