Docs

[carringtontech]

I used the code here so that my NavBar logo would change from Stacked to Inline as a visitor scrolls down the page: https://community.theme.co/forums/topic/stacked-to-inline-logo-on-scroll/page/3/

However, there is an issue: I am using one page navigation. When the page scrolls, the page’s scroll position “pops” at the transition between Stacked and Inline. If you attempt to use the NavBar menu to scroll to a section, and the transition from Stacked to Inline occurs during the resulting animation, the page does not properly scroll to the top of the selected section. It misses it by enough pixels that you can’t see the top of the section you scrolled to.

Is there some way to fix this?

Thank you!

[Lely]

Hi There,

Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

[carringtontech]

This reply has been marked as private.

[Nabeel A]

Hi again,

Thank you for providing the credentials, Try replacing the code with this one:

jQuery(document).ready(function($) {
	var $masthead = $('.masthead');
	var $logo     = $('.x-brand');
	var $navbar   = $('.x-navbar');
	var $navBtn   = $('.x-btn-navbar');
	var $logoBar  = $('.x-logobar-inner > .x-container');
        var $stackedLogoOffset = jQuery('header.masthead-stacked .x-logobar').outerHeight();

	function navStackToInline() {
		if ( $navbar.hasClass('x-navbar-fixed-top') ) {
			$masthead.removeClass('masthead-stacked');
			$masthead.addClass('masthead-inline');
                        $('.x-main.full').css('top', $stackedLogoOffset);
			$logo.insertBefore($navBtn);
			$(".x-navbar-inner .x-brand img").attr('src', 'http://your-domain.com/new-logo.png');
		} else {
			$masthead.removeClass('masthead-inline');
			$masthead.addClass('masthead-stacked');
                        $('.x-main.full').css('top', 'auto');
			$logo.appendTo($logoBar);
			$(".x-brand img").attr('src', 'http://your-domain.com/old-logo.png');
		}
	}

	navStackToInline();

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

Don’t forget to clear your browser’s cache after adding the code. Let us know how this goes!

[carringtontech]

Hmm, it’s still doing some weird stuff. On IE11 it’s really apparent.

On Chrome it also doesn’t quite do the right thing. To reproduce the behavior on Chrome:

1) refresh the page
2) click “Expertise” in NavBar. Note where it scrolls — not quite to the right position.
3) click “Expertise” again in NavBar. Note that it scrolls again — this time, to the correct position.

[Lely]

Hi There,

Please try to update the javascript code to this:

  jQuery(document).ready(function($) {
	var $masthead = $('.masthead');
	var $logo     = $('.x-brand');
	var $navbar   = $('.x-navbar');
	var $navBtn   = $('.x-btn-navbar');
	var $logoBar  = $('.x-logobar-inner > .x-container');
        var $stackedLogoOffset = jQuery('header.masthead-stacked .x-logobar').outerHeight();

	function navStackToInline() {
		if ( $navbar.hasClass('x-navbar-fixed-top') ) {
			$masthead.removeClass('masthead-stacked');
			$masthead.addClass('masthead-inline');
                        $('.x-main.full').css('top', $stackedLogoOffset);
			$logo.insertBefore($navBtn);
			$(".x-navbar-inner .x-brand img").attr('src', 'http://allenwood.ca/wp-content/uploads/2016/06/MiliarisFamilyLawLogoSideBySide.png');
		} else {
			$masthead.removeClass('masthead-inline');
			$masthead.addClass('masthead-stacked');
                        $('.x-main.full').css('top', 'auto');
			$logo.appendTo($logoBar);
			$(".x-brand img").attr('src', 'http://allenwood.ca/wp-content/uploads/2016/06/MiliarisFamilyLawLogo2-Web.png');
		}
	}

	navStackToInline();

	$(window).ready(navStackToInline).scroll(function() {
		navStackToInline();
	});
	
	  	var window_base = window.location.href.split("#").slice(0)[0];
	var window_hash = window.location.hash == '' ? 'body' : '#'+window.location.href.split("#").slice(-1)[0];
	var outbound = /^https?:\/\//i;

	$('.x-nav a').each(function(){ //Scan links and convert them to relative hash for one page navigation's Active statuses to work properly when manually scrolling

		var hash = /#/.test( $(this).attr('href') )  ? '#' + $(this).attr('href').split("#").slice(-1)[0] : '';
		var anchor_base = /#/.test( $(this).attr('href') ) ? $(this).attr('href').split("#").slice(0)[0] : $(this).attr('href');

	    if(hash) { //Does it have hash? then perform check
		    if(anchor_base == window_base) { //If same page, then no need to reload, just make it relative
		    	$(this).attr('href', hash);
		    } // Else, leave it that way. So when user clicked, it will just link them to outbound page
		}

	}).click(function(e){ //Enable Parent and Submenu scrolling
		
		var hash = /#/.test( $(this).attr('href') ) ? '#' + $(this).attr('href').split("#").slice(-1)[0] : 'body';
        
	    if(hash && !outbound.test( $(this).attr('href') ) ) { //Does it have relative hash?

		    	e.preventDefault(); //Disable jumping
		    	e.stopPropagation();

		    	$('html,body').stop().animate({ scrollTop: $( hash ).offset().top - $('.x-navbar').height()},700 ,'swing');

		    	//Now add active status for automatic scrolling
		    	$('.x-nav li').removeClass('current-menu-item');
		    	$(this).parent().addClass('current-menu-item');

		}

	});

	//$('html,body').css({ scrollTop : 0});
	setTimeout( function(){
	$(document).ready(function(){ // Enable auto scroll when loaded.
		$('.x-nav li').removeClass('current-menu-item');
		//$('a:not([href*="#"])').parent().addClass('current-menu-item'); For experiment only

		if(window_hash) {
			$('a[href$="'+window_hash+'"]').click(); //Click it, so it will use default click from one page navigation event and submenu event
		}
	}); }, 300);
}); 

Hope this helps.

[carringtontech]

I really appreciate the help you’ve been giving. Unfortunately the site is still was showing some very strange behaviors, so I wanted to propose another approach.

I’ve changed the Header NavBar position to Fixed Right, and the Layout to Inline. Then I included the site logo beneath the Header NavBar, in the page itself.

Now here’s the slight customization I’m looking for. I’d like the logo in the NavBar to appear only when the page is scrolled down past the instance of the logo that’s on the page itself. (Intuition: I don’t want there to be 2 copies of the logo on screen, but I want the logo to show up on the NavBar when scrolling further down the page).

Is there a way to do this? Again thank you – I am not a javascript wizard and greatly appreciate this support.

[carringtontech]

Quick update: This post provided me with exactly the code I was looking for: https://community.theme.co/forums/topic/different-logo-after-scrolling/

Thank you again for all your help!

[Christopher]

Glad to hear that you found the topic helpful.

[Author]

Posts