NOW UPDATED TO SUPPORT FIREFOX
Here's another option to swap your logo on scroll that also supports the FireFox browser. Although this method is slightly more involved, it also works across modern browsers. No plugins needed. Just a few minutes and some CSS.
I’ve been searching for something like this for a little while and finally found a solution that worked out perfectly for one of my websites.
Often times we’re stuck with the default settings that limit us to using the same background color AND logo version when using Elementor’s Sticky Header feature. With this logo swap option we’ve found a solution that works well on Elementor websites.
See how you can apply this cool feature to YOUR Elementor websites.
What you'll need
- A WordPress website.
- Elementor Pro plugin setup on your WordPress site.
- Two versions of your logo (preferably the same size for best results)
- Have the URL of your logo handy.
- Have the URL of your "swap" logo handy.
- About 5-10 minutes.
We’re assuming you already have WordPress and the necessary Elementor plugins active and ready to go. If not please you may want to get your website setup first. Otherwise, much of this won’t make sense.
Let's get started
When working with headers in Elementor I prefer to start with a new page instead of a new header template. This allows me to test things out more easily. Once satisfied I can simply copy and paste the header into a header template.
Step 01 - Create a New Test Page.
- Add a new page and launch the Elementor builder.
- Add a new section. I'm using a 1 column section.
- Update the section's height by going to Layout > Height and selecting "Min Height". Click the "VH" option and type in "100".
- Update the section's background to a solid color.
- Duplicate the section and update the background color to something different.
Step 02 - Build Your Header.
- Create a new section above the ones you just created. For purposes of this tutorial we went with the single column.
- Drag in an image module.
- Swap the default image with the logo you'd like to use. (Upload both logo options if you haven't done so already.)
- Give the image the "logo" CSS Class.
Step 03 - Update Your Header Section Settings.
- Under "Layout" go to "Height" and choose "Minimum Height". For purposes of this tutorial I am going with 100px. You can update this to what works for your header.
- Under the "Advanced" menu change the BOTTOM Margin to "-100".
Note, to apply a "negative" margin you will first need to type in the number WITHOUT the minus (-) symbol... and then add it afterwards. - Under the "Advanced" menu type in "header" for the CSS ID.
- Type in "1" for the Z-Index. (just to be safe).
- Under "Motion Effects" choose "Top" for the Sticky options.
- Type in "1" for Effects Offset.
- Under "Custom CSS" copy and paste the CSS provided below this section.
- Copy the link for your "swap" logo. You can find the link by clicking on the current logo image... selecting the second logo file... and copying the link from the "Copy Link" section.
- Replace the text that says PASTE_SWAP_LOGO_LINK_HERE with your logo link.
Header CSS (copy and paste this code into your header section's "Custom CSS" text area):
#header.elementor-sticky--effects {
background-color: rgba(256,256,256,1);
transition: all .5s ease;
box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.1);
}
#header.elementor-sticky--effects .logo:before {
content:url('PASTE_SWAP_LOGO_LINK_HERE');
position: absolute;
left: 0;
right: 0;
}
#header.elementor-sticky--effects .logo img {
opacity: 0;
}
Step 04 - Launch and Test Your Header
- Save your page.
- Click the preview "eye" button.
Step 05 (optional) - Site-wide header.
- Open up a new tab in your web browser.
- Either open an existing Header Template OR create a new one.
- Go to the browser tab containing your new header. Right-click on the header's section tab and select "copy".
- Go to your browser tab containing your site-wide header. Right-click into the dotted "Drag widget here" area and select "paste".
- Publish and test your header.
Considerations
- Mobile Height: Depending on your how your header stacks you may need to change the height of your header. If you DO change the height make sure to ALSO update the bottom margin to reflect the new height.
- Adjust background color: You may need to change your background color to work for your specific header.
