[Headlines34Participant]

Hello,

Is it possible to use one logo (pineapple3 attached) for stacked when landing on the page and then have it change to another once scrolling begins (logo4 attached)?’

Thanks,
Chuck

[LelyModerator]

Hello Chuck,

Thanks for posting in. Yes that is possible.
1.) On Appearance > Customize > Header > Logo and Navigation > Layout: Choose Stacked.
2.)On Appearance > Customize > Header > Logo : Upload the pineapple3 logo.
3. Add the following code on Appearance > Customize > Custom > Edit Global Javascript:

jQuery(document).ready(function($) {
   var $masthead  = $('.masthead');
   var $logo      = $('.x-brand');
   var $logoSrc   = $logo.find('img').attr('src');
   var $navbar    = $('.x-navbar');
   var $navBtn    = $('.x-btn-navbar');
   var $logoBar   = $('.x-logobar-inner > .x-container');

   var $alt_logo  = 'ADD_LOGO4_URL HERE';
   
   function navStackToInline( $alt_logo ) {
      if ( $navbar.hasClass('x-navbar-fixed-top') ) {
         $masthead.removeClass('masthead-stacked');
         $masthead.addClass('masthead-inline');
         $logo.insertBefore($navBtn);
         if ( $alt_logo ) {
            $logo.find('img').attr('src', $alt_logo)
         }
      } else { 
         $masthead.removeClass('masthead-inline');
         $masthead.addClass('masthead-stacked');
         $logo.appendTo($logoBar).show();
        $logoBar.animate({height:$logo.outerHeight()});
         if ( $alt_logo ) {
            $logo.find('img').attr('src', $logoSrc);
         }
      }
   }

   navStackToInline();

   $(window).ready(navStackToInline($alt_logo)).scroll(function() {
      navStackToInline($alt_logo);
  
   });
    var $window = $(window);
    var windowsize = $window.width();
    if (windowsize < 767) {
   			$(".x-btn-navbar").appendTo(".x-topbar");
   } 
});

Then from above code update this part: var $alt_logo = ‘ADD_LOGO4_URL HERE’;

Hope this helps.

[Headlines34Participant]

We’re getting somewhere…
How would I go about editing the CSS of the logo to align with the rest of the Nav Bar?

[Headlines34Participant]

Not to go off topic, but I can’t get the essential grid to load on the website?
http://www.ciccaronerealestate.com/

[Headlines34Participant]

In regards to the new logo setup, the page “bounces” from time to time. It’ll scroll the inline menu over the pineapple logo at the top.

[JadeModerator]

Hi there,

To align the logo to the nav bar, please find this code:

.x-brand img {
    width: 200px;
}

and update it to:

.x-brand img {
    width: 200px;
    margin-top: 15px;
}

Would you mind pointing out which section the Essential Grid is not loading? I could see an Essential Grid added under Properties section and it seems to be displaying correctly.

[Headlines34Participant]

Went with a Hero image instead. Much cleaner result

"jQuery('<img src="http://domain.com/hero-image.png" />').insertBefore('.masthead');"

[JoaoModerator]

Great to see you found a solution.

Let us know if you need help with anything else.

Thanks

Joao

[Author]

Posts