# 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.

### Adding / updating logos The process is the same for the Primary and the Secondary logo. 1. Go to `/admin/appearance/settings/`. 2. Scroll down to Components. 3. Select Logo. 4. Fill in the alt text for the logo first (so you don't forget later).

4. 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. 5. Select `Choose file` and follow the steps to add the logo. Do this for every logo type for the Primary logo.

5. If you're using a Secondary logo, open the Secondary logo dropdown and follow the same steps. 6. 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

#### Dark theme Inline stacked (logo) desktop

Dark theme desktop Header with Logo set to Inline stacked

#### Dark theme Inline stacked (logo) mobile