Docs

[thelistener]

Hola!
I am trying to find a way to shrink the logo in the site I’m working on (development link? click here). Similar to this one http://silvercrested.com/

I was trying to follow along on a similar thread a while back (link here), but to be honest, I got lost and am now pretty much scratching my head and what I’m missing.

Basically, what I want is for the logo to smoothly shrink to a decent size (about 80px) while also making sure the rest of the navigation links are line centered horizontally. Also how do I remove the underline on hover while also adding a a darker background color on hover like this site does: http://silvercrested.com/.

[Darshana]

Hi there,

Thanks for writing in! Regretfully this isn’t a feature offered by X. It could be possible with custom development, but this would be outside the scope of support we can offer. You may wish to consult a developer to assist you with this. X is quite extensible with child themes, so there are plenty of possibilities.

However if you have some knowledge on custom development, the following resource may help you to implement a similar feature (http://callmenick.com/post/animated-resizing-header-on-scroll).

Thanks!

[thelistener]

Interesting. I figured since other threads had provided some custom answers I would get some direction/code to use, too.

Can you tell me how to remove the underline on hover and adda darker background color on hover like this site does: http://silvercrested.com/.

[Joao]

Hi there,

To have your logo and navbar resized to a smaller size when scrolling please add the following code to Appereance Customizer 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);
      }
    });
  }
});

Please add the following code to Appereance Customizer 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;
}

.x-navbar {
border:none;
box-shadow:none;
}

Note that you might have to adjust the px size on both codes in order to adapt to your layout in case you need help, please let us know.

To get the hoovering effect Please add the following code to Appereance Customizer Custom CSS

.x-navbar .desktop .x-nav > li > a:hover{
    box-shadow: 0 2px 0 0 #263248;
    background: purple;
}

I also recommend you going to Appereance Customizer Header and adjust the top link spacing so you ca center your navbar links with your logo.

Let us know if you need further help

joao

[thelistener]

Hi Joao,
Thank you. The hover color fix worked. Can you tell me how to horizontally align the menu items to the logo when the header shrinks?

Also, after adding the code, the logo doesn’t shrink, but the menu does…what did i do wrong?

[Christopher]

Hi there,

Please find this code:

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

And update it to :

.x-navbar.x-navbar-fixed-top .desktop .x-nav > li > a {
    height: 75px;
    padding-top: 28px;
}
.x-navbar.x-navbar-fixed-top .x-brand img {
    width: 50%;
    margin-right: auto;
    margin-left: auto;
    display: block;
}

Hope it helps.

[thelistener]

That definitely helped. I tried adding the following code to make the logo also shrink smoothly like the navbar does now, but it didn’t work. What am I missing? Is there a way to tweak the javascript so the logo also shrinks smoothly?

transition: min-height 0.5s ease;
-webkit-transition: min-height 0.5s ease;

[Rad]

Hi there,

You should change it to this,

transition: width 0.5s ease;
-webkit-transition: width 0.5s ease;

It’s the width that changes upon scroll, hence, it should be the property that should animate.

Cheers!

[thelistener]

where do i put it?

[Rue Nel]

Hello There,

Thanks for the updates! Please add this code instead in your customizer, Appearance > Customize > Custom > CSS

.x-navbar .x-brand img {
    transition: width 0.5s ease;
    -webkit-transition: width 0.5s ease;
}

We would loved to know if this has work for you. Thank you.

[thelistener]

I added the code, but the logo still doesn’t ease like the navbar. Could there be something missing from the javascript code?

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);
      }
    });
  }
});

[Rupok]

Hi there,

The logo seems easing as well. Here goes a screencast on my end – http://recordit.co/ReQo3DEkmh

Cheers!

[thelistener]

Hi Rupok….that’s not the site I am developing. That was the example site that I was emulating.

Here’s the development link (click here)

[Rupok]

Hi there,

Sorry for the confusion. Kindly update this code :

.x-navbar .x-brand img {
    transition: width 0.5s ease;
    -webkit-transition: width 0.5s ease;
}

to

.x-navbar .x-brand img {
    width: 100%;
    transition: width 0.5s ease;
    -webkit-transition: width 0.5s ease;
}

Hope this helps.

[thelistener]

That did it! THANKS YOU THANK YOU THANK YOU!!!!

[Author]

Posts