Share on facebook
Share on linkedin
Share on twitter
Share on pinterest
How to Swap Header Logo on Scroll in Elementor

How to Swap Header Logo on Scroll in Elementor

Here's a cool way to swap out your logo on scroll when using Elementor's sticky Header. 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 "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 120 px. You can update this to what works for your header.
  • 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" cut and paste the CSS provided below.
  • Grab 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.
  • Cut and paste your "swap" logo link into the "content:url" section of your CSS.

Header CSS (cut and paste into your header section's "Custom CSS":

#header.elementor-sticky--effects {
background-color: rgba(0,0,0,1);
transition: all .5s ease;
box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.1);
}
#header.elementor-sticky--effects .logo img {
content:url('PASTE_LOGO_LINK_HERE');
}

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

  1. 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.
  2. Adjust background color: You may need to change your background color to work for your specific header.

If you enjoyed this post please share or comment below!

Share on facebook
Share on linkedin
Share on twitter
Share on pinterest
mw-04-10-2019-205-square
Fill out the form to get started.