Docs

[goldbaum]

Hi,

1. How can I change the white border araound the content to another colour?
See:

http://tomsfotohokje.nl/fotohokje/

2. I want the logo to be replaced with another smaller logo when scrolling down. How to do this?

[Joao]

Hi There,

1

Add the following code to your Appereance / Custom / CSS

.entry-wrap {

background-color: #ffffff

}

If you would like to have the same logo but in a smaller version please add this:

to your Custom / CSS

.x-navbar.x-navbar-fixed-top .x-navbar-inner {
transition: min-height 0.5s ease;
-webkit-transition: min-height 0.5s ease;
}
.x-navbar .desktop .x-nav > li > a, .x-navbar .x-brand, .x-navbar .x-navbar-inner {
    -webkit-transition: height 0.5s ease, padding-top 0.5s ease;
    transition: height12 0.5s ease, padding-top 0.5s ease;
}

.x-navbar .desktop .x-nav > li > a, .x-navbar .x-brand {
    -webkit-transition: min-height 0.5s ease;
    transition: min-height 0.5s ease;
}

.x-navbar.x-navbar-fixed-top .desktop .x-nav > li > a {
height: 60px;
padding-top: 25px;
}

.x-navbar.x-navbar-fixed-top .x-brand {
width: 150px;
margin-top: 0;
}

.x-navbar.x-navbar-fixed-top .x-navbar-inner {
min-height: 60px;
}

And this to your Custom / Javascript:

jQuery(function($) {
  var $body   = $('body');
  var $navbar = $('.x-navbar');
  if ( $body.hasClass('x-navbar-fixed-top-active') && $navbar.length > 0 ) {
    var boxedClasses = '';
    if ( $body.hasClass('x-boxed-layout-active') ) {
      boxedClasses = ' x-container max width';
    }

    $(window).scroll(function() {
      if ( $(this).scrollTop() >= 60 ) {
        $navbar.addClass('x-navbar-fixed-top' + boxedClasses);
      } else {
        $navbar.removeClass('x-navbar-fixed-top' + boxedClasses);
      }
    });
  }
});

** Note that you will need to adjust the px value in the code according to your desired results.

If you would like to change the logo for another image on scrolling use this instead:

Use this instead:

On Custom CSS:

.x-navbar.x-navbar-fixed-top .x-brand img {
    width: auto;
    margin-top: 10px;
}

On Custom / Javascript:

jQuery(function($) {
 $(window).scroll(function() {
   if($('.x-navbar').hasClass('x-navbar-fixed-top')) {
     $('.x-navbar-fixed-top .x-brand img').attr('src','http://placehold.it/120?text=Secondary+Logo!');
   }else{
     $('.x-navbar .x-brand img').attr('src','http://placehold.it/120?text=Original+Logo!');
   }
 });
});

Hope that helps,

Joao

[Author]

Posts