Changing Logo per page?

Hi there,

Is there any way that I can change my logo per page while using the avenue template?

Thanks in advance!

Brandi

You can do this with custom CSS or custom JavaScript.

Avenue demo has no logo to check.

If you can share site to your site, it will be better.

@tuanphan Thank you for your response! my site is https://www.brandijoan.com

I'm actually dying to know as well. I love the template, but I need just some some pages with a different logo, and background color.

On 1/4/2020 at 1:05 AM, Brandijoan said:

@tuanphan Thank you for your response! my site is https://www.brandijoan.com

add to Page Settings > Advanced > Header

<script>
  $("#logo img").attr("src", "https://beaverhero.com/wp-content/uploads/2019/06/trees-3464777_640-min.jpg")
</script>

Doesn't seem to be working?

11 hours ago, Brandijoan said:

Doesn't seem to be working?

Which page did you insert?

I tried inserting the code on the homepage and this page https://www.brandijoan.com/#/the-lorenzo-dress/

6 hours ago, Brandijoan said:

I tried inserting the code on the homepage and this page https://www.brandijoan.com/#/the-lorenzo-dress/

maybe missing a character, try again with this code

<script>
  $("#logo img").attr("src", "https://beaverhero.com/wp-content/uploads/2019/06/trees-3464777_640-min.jpg");
</script>

Still not working - could it be because I have the code bellow inserted into my code injection?

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<div class="logoload"></div>
<script>
$(function() {
  var loadLogo = $('header').find('img').attr('src');
  $('.logoload').css('background-image', 'url(' + loadLogo + ')');
});
</script>
<style>
.logoload {
  background-color: #eddad4;
  background-size: 150px;
  position: fixed;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  z-index: 9999;
  background-position: center;
  background-repeat: no-repeat;
}
</style>
<script type="text/javascript">
$(window).load(function() {
    $(".logoload").delay(700).fadeOut("slow");
})
</script>

Add to Page Settings > Advanced > Header

<style>
#logo img {
    visibility: hidden;
}
#logo h1.logo a {
    background-image: url(https://beaverhero.com/wp-content/uploads/2019/06/trees-3464777_640-min.jpg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    display: block;
    height: 100%;
}
</style>

It worked! Thank you SO much!