Header logos

CivicTheme allows several Header logo configurations.

You can add up two logos, a Primary and a Secondary logo. The Secondary logo is useful in the case of dual branding, e.g. your Department logo and the Commonwealth Coat of Arms.

Once you have uploaded your logo you can then select how you want the logo/s to display in the Header.

When you set the Header Theme, Light or Dark, you need to consider the logos you've uploaded. If you use the Light theme, your logo needs to be dark enough to be visually accessible on the light background. If you use the Dark theme, you need to ensure you're logo is light enough that it will be visually accessible on a dark background.

'Default' Logo desktop (Light theme)

'Inline' Logo desktop (Dark theme)

Adding / updating logos

The process is the same for the Primary and the Secondary logo.

1. Go to /admin/appearance/settings/<site-name>.

2. Scroll down to Components.

3. Select Logo.

4. Fill in the alt text for the logo first (so you don't forget later).

1. Open the Primary logo dropdown and take note of which logos need to be added for which use: Light and Dark theme, desktop and mobile use.

2. Select Choose file and follow the steps to add the logo. Do this for every logo type for the Primary logo.

1. If you're using a Secondary logo, open the Secondary logo dropdown and follow the same steps.

2. Scroll to the bottom and select 'Save configuration'.

Configure the Header logos

Logo type

Depending on the space within your site's 'Header', you can select how the Logo/s display.

The following table illustrates the different Logo styles using example logos:

• Default

• Stacked (requires two logos)

• Inline

• Inline stacked (requires two logos)

Logo type	Desktop output	Mobile output
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 Header

Light theme desktop

Light theme desktop Header with Logo set to Default

Light theme mobile

Light theme mobile Header with Logo set to Default

Dark theme Inline stacked (logo) desktop

Dark theme desktop Header with Logo set to Inline stacked

Dark theme Inline stacked (logo) mobile

Dark theme mobile Header with Logo set to Inline stacked