0

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.

  • Hi Rok - I'm not familiar with this theme but if you include the html of the current logo (Copy from View Page Source or Inspect Element) and it's container div we can then add a bit of custom Javascript to the theme that will append a secondary logo. – Louis S Aug 4 at 12:50
  • Hello, here is the actual website: hofman-telekom.si , right now, it looks like there is 2 logos in the header, but its just 1 image with both of them in it. I would like for the main logo to stay as is, and if clicked on redirect to the main page, and the second one, to forward to a new page. I'm having trouble copying just the logo source, and the div container. I can copy the whole html code, but that would be to long for this comment. – Rok1215 Aug 4 at 16:10
0

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>
  • I can't believe it actually worked. I just pasted it into the header.php file and it WORKED. I really can't be thankful enough to you, for taking your time to help me with this, you wouldn't believe the hours I spent trying to figure it out. Again thank you very much!!! – Rok1215 Aug 4 at 21:15
  • Haha no problem - Glad it worked first time! Please mark the answer as correct if you're happy with the code. – Louis S Aug 4 at 21:59

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.