You'll create a custom page header type - which can be a copy of an existing header type for your theme (e.g., header, no header, landing, splash) - where you'll replace the {logo} mustache tag (the tag that holds the default site logo) in the header type html with a custom mustache tag like {logo2:content} (which will hold the second site logo). You'll change the header type for the pages that should display the second logo to the custom header type. On those pages, you'll drop an image element to the zone where the custom mustache tag is and load that with the new logo.
- Go to the Code Editor: In the Site Editor, click "Theme" in the top navigation menu then click the "Edit HTML/CSS" button.
- In the Code Editor, you'll see all the theme's header types at the top of the left-hand sidebar under the section heading "Header Types". Let's say that most of your site pages use the "Header" header type. You'll need to create a copy of this header type where you'll modify the logo.
- Create a new header type by clicking the "+" sign to the right of the Header Type section heading and select "New" and give the new header type a logical name, e.g., "header-logo2.html". Click on the "header.html" header type and copy all the code you see there. Paste that code into the custom header type, header-logo2.html (replace all the skeleton code that was created when the custom header was created). Now you have a custom header type that is identical to the theme's header page header type.
- In the header-logo2 header type, change all instances of the {logo} mustache tag to {logo2:content}. Click the Save button in the upper right corner of the Code Editor.
- In the Site Editor, click "Pages" in the top navigation then click a page in the left-hand sidebar pages stack where you wish to have the second logo appear. In the page details (in the left-hand sidebar), click the Header Type drop-down and select your custom page header type (which should appear as "Header-logo2"). You won't see the site logo above the navigation menu in this case. Drag and drop an image element to the area where the logo should be (above your site's navigation menu). As you start dragging the image element, you'll see a dotted line around the element drop area where the custom mustache tag is (right above your site's navigation menu) and that's where you'll drop the image element. Load the image element with the second logo. Add a link to your site's home page in the image element attributes. Add any necessary margins (image elements are by default, center-justified); don't manually resize the logo as this will fix its size across screen sizes (size the image for the destkop screen in your graphics application before you upload - the image will automatically shrink for mobile). This site page will appear on the front end with the same layout as a regular header type page but will display the second logo you uploaded instead of the default logo.
- To change the logo in other pages, click "Pages" in the Site Editor top navigation and then click the desired page in the left-hand pages stack. Change the Header Type of that page to your custom header type: Header-logo2 and the new logo will be there.
If you need the second logo to appear on another page header type, e.g., No Header, then repeat these steps to create another custom header type based on the other theme header type layout.
