different logos in sticky header

Asked on October 12, 2015 in Customization.

Hi. I am trying to add a different logo to the header when the page is scrolled down. The logo has to be smaller than the initial logo. I need it to line up with the rest of the content, so adding it to as the background image of .header-sticky.is_stuck.is_stuck_show  is not really going to work.

I have figured out how to hide the logo as added during customistion: .header-sticky.is_stuck.is_stuck_show img{
display: none!important;
}

the page url is: http://drsteyn.co.za/DentalImplants/

Thank you in advance 🙂

.header-site, .header-site.header-sticky {
background: rgba(252, 249, 248, .5)!important;
}

.header-site.header-sticky {
background-color: transparent !important;
border-bottom: 1px solid rgba(255, 255, 255, 0.2)!important;
}

.header-sticky.is_stuck.is_stuck_show img{
display: none!important;
}

.header-sticky.is_stuck.is_stuck_show {
background-color: #3D454C !important;
border: medium none!important;
padding: 0px!important;
box-shadow: 0px 3px 0px rgba(0, 0, 0, 0.15)!important;
background-image: url(‘http://drsteyn.co.za/DentalImplants/wp-content/uploads/2015/08/faq_03.jpg’)!important;
height: 50px;
}
.header-sticky {
transition: background 0.1s ease-in-out 0s, margin-top 0.15s ease-in-out 0s, opacity 0.15s ease-in-out 0s;
}

Chantal Layers User

Thanks so much – for future, if it was both a different size, and and a different image, how would one do it?

on October 13, 2015.

Hi there,

You would have to hide the original image, then set the new one as a background of the logo element. This is not at all recommended as background fills are not responsive.

.header-sticky.is_stuck.is_stuck_show .site-logo-link img{display: none;}
.header-sticky.is_stuck.is_stuck_show .site-logo-link{
background-image: url(http://yoursite.com/wp-content/uploads/mobile-logo.jpg);
width: 100px;
height: 80px;
}

The following article gets into image replacement:

https://docs.layerswp.com/doc/how-to-make-slider-and-widget-backgrounds-responsive/

on October 15, 2015.
Reply
  • Possible Answers to Your Question:

  • 1 Answer(s)
    Answered on October 12, 2015.

    Hi there,

    If you want to make the logo smaller when the page is scrolled, you only need to scale it with CSS like this:

    
    .header-sticky.is_stuck.is_stuck_show .site-logo-link img {
    
    max-height: 20px;
    
    }
    
    

    The default is 30px in Layers without a child theme.

    The same can be used to allow it to be larger than the 30px default:

    
    .header-sticky.is_stuck.is_stuck_show .site-logo-link img {
    
    max-height: 80px;
    
    }
    
    

    To center the Header Menu, you can add padding.

    
    .header-site nav{padding-top: 30px;}
    
    
    Reply