Docs

[m_c__k]

Hi,

Is it possible to have a text instead of logo when at top of the page, which then turns into logo when scrolling (with fixed-top)? And preferably with CSS?

Thanks a lot,
Maciek

[Lely]

Hello Maciek,

We can achieve this using custom Javascript and not CSS. Please add this custom code on Appearance > Customize > Custom > Edit Global Javascript:

jQuery(function($) {
     $('.x-brand').css('display','none');
     $('.visually-hidden').css({'height':'auto', 'width':'auto', 'clip':'initial'});
 
 $(window).scroll(function() {
   if($('.x-navbar').hasClass('x-navbar-fixed-top')) {
    
   $('.visually-hidden').css({'height':'1', 'width':'1', 'clip':'rect(0 0 0 0)'});    
     $('.x-brand').css('display','block');
   }else{
     $('.x-brand').css('display','none');
 $('.visually-hidden').css({'height':'auto', 'width':'auto', 'clip':'initial'}); 
   }
 });
});

Hope this helps.

[m_c__k]

Thanks a lot! 🙂

[JvP]

Will this be possible with the upcoming header update?

[Nabeel A]

Hi there,

Thanks for writing in! Regretfully, at this time I am not entirely certain what it is you would like to accomplish based on the information given in your post. If you wouldn’t mind providing us with a little more clarification, so we have a better understanding of the situation.

Thanks!

[Author]

Posts