Harper - Adding logo to sticky navigation

Harper has a sticky navigation/header that displays as you scroll down. By default, if you have uploaded a custom logo, the logo will not display in the sticky navigation. The reason for this is for more flexibility with colors — if your logo is black and your sticky navigation is black, the logo would be "invisible" in the navigation. There are some easy workarounds, though!

Option #1 - Use existing logo in sticky navigation

Option #1 is to enable the logo in your sticky navigation as-is. That means whatever logo image you've uploaded, a smaller version of that same logo will display in the sticky navigation. For this option to work, you'll need to do one of 2 things:

• Upload a colored or white logo as your main logo. 
• Or, upload a black/dark logo and then change the sticky navigation background color to something LIGHT colored.

Instructions:

1. Go to WordPress > Appearance > Editor.

2. Locate this section in the Style.css file and delete it completely:

3. Click Update File to save.

4. Next, click here and copy the code.

5. Go to WordPress > Appearance > Customize > Additional CSS and paste the code. Click Publish to save. Then you're all set! Your logo will display in the sticky navigation.

Option #2 - Use different logo in sticky navigation

If you'd like to use a different logo image in the sticky navigation, here are instructions:

1. Follow steps 1 to 3 above.

2. Create a new logo image sized at 266px (width) by 100px (height). Upload the image at WordPress > Media Library > Add New. If you want the sticky navigation background to stay black, your logo text should be white.

3. Click here and copy the code.

4. Go to WordPress > Appearance > Customize > Additional CSS and paste the code.

5. Leave the Customizer page open and create a new tab. Go to WordPress > Media Library and click on the logo image you uploaded in step 2. On the right, copy the link that follows "Copy Link." The link will look something like this:  http://yourwebsite.com/wp-content/uploads/2019/11/your-logo.png

6. Return to the Customizer. Select the "LINK TO LOGO FILE" text and paste your link. You will paste the link BETWEEN the parentheses, like this: url(http://yourwebsite.com/wp-content/uploads/2019/11/your-logo.png)

7. Click Publish to save. You should now see your main logo at the top of the page, and a different mini logo in the sticky navigation.