Docs

[Rish]

Hi X-Team,

I am using Ethos stack with uber menu and i able to achieve stack to inline on scroll but they only bug i am facing is that,When website is loaded, the stack appears fine but when scroll down for inline and then scroll up to got back to stack logo ,it moves my content up and content cuts off from top and also the spacing of navbar become out.
The Website preview link is
http://www.capitaldgroup.com/Website

I am sure their is a problem in javascript but i try my best to figure out but failed 🙁
Please help me to solve that.

The Script is below

/* code for stack to inline in ethos */
jQuery(document).ready(function($) {
var $window = $(window);
var $masthead = $(‘.masthead’);
var $logo = $(‘.x-brand’);
var $navbar = $(‘.x-navbar’);
var $navBtn = $(‘.ubermenu-nav’);
var $logoBar = $(‘.x-logobar > .x-container’);

function navStackToInline() {
if ( $navbar.hasClass(‘x-navbar-fixed-top’) ) {
$masthead.removeClass(‘masthead-stacked’);
$masthead.addClass(‘masthead-inline’);
$logo.insertBefore($navBtn);
$(“.x-navbar-inner .x-brand img”).attr(‘src’, ‘http://www.capitaldgroup.com/Website/wp-content/uploads/2016/06/D-journal-logo-for-website.jpg’);
} else {
$masthead.removeClass(‘masthead-inline’);
$masthead.addClass(‘masthead-stacked’);
$logo.appendTo($logoBar);
$(“.x-brand img”).attr(‘src’, ‘http://www.capitaldgroup.com/Website/wp-content/uploads/2016/06/D-journal-logo-for-website.jpg’);
}
}

navStackToInline();

$(window).ready(navStackToInline).scroll(function() {
navStackToInline();

});
});

These are the threads i am using as a reference
https://community.theme.co/forums/topic/stacked-to-inline-logo-on-scroll
https://community.theme.co/forums/topic/stacked-on-desktop-inline-mobile-no-background-image-on-mobile/

[Christopher]

Hi there,

Please add following code in Customize -> Custom -> CSS :

body.x-navbar-fixed-top-active .x-navbar-wrap {
    height: auto;
}

Hope that helps.

[Rish]

You People are really great 🙂

[Christopher]

Glad we could help you with this.

[Author]

Posts