Adding a second logo next to the main one in header

Question

I want a second logo added to the right side of the main logo on my website, and have it redirect to a different website, when clicked on. I've seen people suggesting editing the code in header.php, but I've looked trough the code and I can't find any code that says anything about changing the logo url, or adding a second logo. I'm using the Avada 3.7.3 theme, and yes I know it is very outdated, but I don't think I can update it, without paying for the licence. This is a old website, that I took over from a former coworker, and I do not know how he was able to add it to the site.

I hope someone will be able to help me with this, thanks.

Answer 1

Below is some javascript that will hopefully append a new link to the top right hand side of your current logo. You will need to add this script to your theme.

I've added comments to explain what I've done but feel free to ask me any questions if it's not clear.

<script>
// Create a div element with class secondary-logo which will contain the secondary link inside.
var secondary_logo_link = document.createElement('div');
secondary_logo_link.className='secondary-logo';

// Add the secondary link (replace https://www.google.com with your desired url) to the new container element. Also adding custom CSS styling to help position/size the new element correctly. 
secondary_logo_link.innerHTML = '<a href="https://www.google.com"></a><style>.logo{ position:relative; }.secondary-logo{position: absolute; top: 0; right: 0; width: 27%; height: 100%; z-index: 1;}.secondary-logo a{height: 100%; width: 100%;}</style>';

//Finally append the new secondary-logo element to both occurances of the logo (header and sticky).
document.getElementsByClassName('logo')[0].appendChild(secondary_logo_link.cloneNode(true));
document.getElementsByClassName('logo')[1].appendChild(secondary_logo_link.cloneNode(true));
</script>