Switching Logos with JavaScript on Avada
Sometimes the need arises to load a specific logo into the header on specific posts/pages of a WordPress site using Avada. Let’s talk about a few options to do just that and then do it with JavaScript, shall we?
Learn
Watch
Download
Via Templating
You could modify Avada’s templates for the posts, pages you want to display your special logo on, or you could override the template responsible for header or, even better, logo generation. This would require to provide a modified logo.php file at at /templates/logo.php in your child theme. You would add something like
if( is_page(array(64,65) ) )
{
$standard_logo[‘url’] = ‘/path/to/special-logo.png’;
}
Whether it is a pro or a con, you’d have to add page/post IDs to the arrays in the logo.php if you want to display the special logo on additional posts/pages later on. So this solution is not easily accessible for editors.
Via CSS
The general Idea here is to hide the actual logo and add a background-image to its container displaying the special logo. This would get quite fiddly with widths and heights regarding responsiveness. There is an old thread about that approach here.
Via JavaScript
The advantage using JavaScript to perform this task is ease and accessibility for editors. There is a big con though which is delay. The logo will not get switched out until the page and jQuery has been fully loaded.
So we want to create a Global Element in order to reuse the feature on every page necessary.
Create a Code Block, copy the JavaScript there, switch the Image-URLs for the respective URLs to the logo on your site and save it as a Global Element. The script should now switch logos when loaded and you can reuse the code on every post/page.
