Centering navbar links ethos

[Cacoona]

Hi Support!

First of all, major thanks for the help with my other issue, cornerstone is working properly again! Finally able to work on the site.

At the moment I’m updating the navbar and with the help of the forum I almost have what I was looking for…

The topic I used was:

Topic: Smooth Shrinking Logo in Ethos Stack Header + Nav Link Background...

My goal: The inline fixed navbar with the logo needs to shrinks when scrolling down. (www.innercollege.com)

It happens to be that the fixed navbar with logo is shrinking when scrolling down using the following JS and CCS
JS:
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);
  }
});

}
});

CCS:
/* Navbar scroll shrink
*/
.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: 26px;
}
.x-navbar.x-navbar-fixed-top .x-brand img {
width: 90%;
margin-right: auto;
margin-left: auto;
display: block;
}

.x-navbar.x-navbar-fixed-top .x-brand {
width: 100px;
margin-top: 5;
}

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

Very happy with the result so far, the only issue is that the links are not vertically centered when the navigation is in top. The logo is to big and that pushes the navbar height I guess… I want the logo with this height and the links pushed to the middle. What am I missing here?

Thanks again!

[christian]

Hey Steven,

The thread you’ve posted is very old and it might not work well anymore with the new version. Providing custom code fixes and enhancements is not covered in our product support. I know that sounds disappointing especially that we have go way beyond the scope of support in the past providing custom codes. But, as custom codes later caused issues, users came back to ask for support for it and that proved to be a maintenance problem.

Since the issue you described sounds like a minor cosmetic change, maybe we could provide a little bit more guidance but please check your site first as it’s not loading.

Please do remember that by using the custom code, this is already outside the scope of our support and we could not fix issues nor enhance the custom feature especially that a shrinking bar and logo feature is already offered in our Pro. The official solution is to upgrade to it.

Thanks.