Docs

[GonzoDesign]

Hi!
I had change logo after scrolling with this javascript code that you have publishing in another discussion:

jQuery(document).ready(function($){
$(window).scroll(function(){
if ($(this).scrollTop() > 0) {
$(‘.x-navbar-fixed-top’).css(“background-color”, “#fff”);
$(‘.x-navbar .x-brand img’).attr(‘src’,’http://www.gonzodesign.it/wp-content/uploads/2016/03/gonzo-design-firenze-logo.png’);
} else {
$(‘.x-navbar-fixed-top’).css(“background-color”, “transparent”);
$(‘.x-navbar-fixed-top .x-brand img’).attr(‘src’,’http://www.gonzodesign.it/wp-content/uploads/2016/03/logo_bianco.png’);
}
});
});

It works perfectly, but in mobile version I wish stay with a white background and “gonzo-design-firenze-logo.png”.
I have done with css for background but I don’t know how can display only one logo when scroll down.

Sorry for my bad english and have a good day,
Regards 🙂
Consuelo

[Lely]

Hello Consuelo,

Please update this:

@media (max-width: 979px){
  .slide_home{
    margin-top:0;
    margin-bottom:0
   }
  .x-brand img{
    background:url(http://www.gonzodesign.it/wp-content/uploads/2016/03/gonzo-design-firenze-logo.png)
  }
}

To this:

@media (max-width: 979px){
  .slide_home{
    margin-top:0;
    margin-bottom:0;
   }
  .x-brand img{
   opacity:0;
  }
  .x-brand {
    background:url(http://www.gonzodesign.it/wp-content/uploads/2016/03/gonzo-design-firenze-logo.png);
    background-size:contain;
  }
}

Please note to add a semi-colon at the end of each property.

Hope this helps.

[Author]

Posts