Header logos
Last updated
Last updated
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.
The process is the same for the Primary and the Secondary logo.
Go to /admin/appearance/settings/<site-name>.
Scroll down to Components.
Select Logo.
Fill in the alt text for the logo first (so you don't forget later).
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.
Select Choose file and follow the steps to add the logo. Do this for every logo type for the Primary logo.
If you're using a Secondary logo, open the Secondary logo dropdown and follow the same steps.
Scroll to the bottom and select 'Save configuration'.
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. |
Light theme)
Dark theme)
