How to Implement Changing Logos on Scroll in Oxygen

Currently, Oxygen uses the default logo mechanism found in other Weebly themes. This involves having one logo that is present throughout the navigation bar state changes.

However, if you have two instances of a logo image, and wish to alternate between them as the navigation bar design changes from its transparent un-scrolled state to scrolled, you can do accomplish this by following the instructions below.

To implement this change, it's recommended to have some minor knowledge of HTML and CSS, to avoid pasting the code in the wrong places.

Instructions

Part 1: Add the CSS

1. Open up your Weebly builder.
2. Click on "Theme".
3. Click on "Edit HTML/CSS." This will take you to the code editor.
4. In the left sidebar, under "Styles", click on"main.less"
5. In the code, find an empty area (an area that's not inside a code block, right above an annotation is a safe bet) and paste the following code: 

/* Alternating Logos */
.logo-1 {
 display:block !important;
}
.logo-2 {
 display:none !important;
}
body.affix .logo-1 {
 display:none !important;
}
body.affix .logo-2 {
 display:block !important;
}

Part 2: Add the HTML

Now, you'll need to add the relevant HTML.

You need to make this change to every header page you use (including any page layout you import via Page Builder)

In the code editor, do the following: 

6. Under "HEADER TYPE", click on the header layout (in HTML format) you wish to implement this change to. For example, if you wish to add this dual-logo feature to the header layout, click on "header.html."
7. In the HTML code, locate the following line of code (it should be around line 57): "<div class="logo">{logo}</div>"
8. Delete this one line of code (just this code) and replace it with the following code:

<div class="logo">
<!--NOTE: logo-1 (below) represents the first logo image (before user scrolls). To edit width and height, modify the max-width and max-height constraints below. -->
<div class="logo-1">{logo_1:image max-width="200" max-height="100"}</div>
<!--NOTE: logo-2 (below) represents the second logo image (after user scrolls). To edit width and height, modify the max-width and max-height constraints below. -->
<div class="logo-2">{logo_2:image max-width="200" max-height="100"}</div>
</div>

‍

9. NOTE: if you're embedding an SVG logo, you'll want to replace the first bracket and the second bracket (bolded above) with your SVG logo code. The first logo-1 bracket div corresponds to the logo you wish to display in the transparent un-scrolled navigation bar state, while the second logo-2 bracket div corresponds to the logo you wish to display in the scrolled navigation bar with the color background.
10. NOTE: if you wish to change logo dimensions, simply adjust the max-width and max-height attributes of both lines of code.
11. Save your changes.

‍

How To Use

In the Weebly builder, you should see the logo area represented by an image placeholder. There are actually two placeholders--one that shows before the user starts scrolling, and one that shows after the user has initiated the scroll (and when the navbar has changed to a solid background).

​To upload your first logo instance, scroll to the top of the website, and upload the logo image by clicking on the placeholder. Then, to upload the second logo instance, scroll down a bit until the navbar changes states, and upload the second logo image the same way.

If you have any questions, feel free to contact us. If you have any tips about this process, feel free to leave a comment as well to help other Oxygen users.

‍

‍