Header Overlap – two different logos

  • Resolved turnis

    (@turnis)


    7 years, 9 months ago

    Hi, 🙂

    I like the “Header Overlap” but there seems to be no way to use two different logos for the header. The first for while in overlap and the second logo for the sticky header. Any chance you could implement something like this?

Viewing 7 replies - 1 through 7 (of 7 total)
  • Andrew Misplon

    (@misplon)

    7 years, 9 months ago

    Hi @turnis

    It can be done with Code Snippets plugin. It’s slightly technical but we’re happy to help.

    Please, let me know which page this is for, if it isn’t the home page, please send the page ID which you can get from the URL when editing the page.

    Thread Starter turnis

    (@turnis)

    7 years, 9 months ago

    I already have the Code Snippets plugin installed. 🙂
    My website is hosted locally but I did not change much of the default settings so your code snippet should probably work.

    Andrew Misplon

    (@misplon)

    7 years, 9 months ago

    The function we’re using on the Corp demo home page is as follows: 

    if ( ! function_exists( 'siteorigin_corp_child_alt_sticky_logo' ) ) :
function siteorigin_corp_child_alt_sticky_logo( $html ) {
  	if ( is_front_page() ) {
		$html = preg_replace('/<img(.*?)\/>/', '<img src="http://demo.siteorigin.com/corp/files/2018/04/corp-logo-white-2x.png" class="alt-logo" alt="siteorigin corp logo" itemprop="logo" style="max-width: 75px;" /><img src="https://demo.siteorigin.com/corp/files/2017/12/corp-logo-2x.png" class="alt-logo-scroll" alt="siteorigin corp logo" itemprop="logo" style="max-width: 75px;" />', $html );
	}

	return $html;
}
endif;
add_filter( 'get_custom_logo', 'siteorigin_corp_child_alt_sticky_logo' );

    Full instructions are added here: https://siteorigin.com/corp-documentation/advanced-customizations/#heading-alternative-home-page-and-sticky-logo

    Thread Starter turnis

    (@turnis)

    7 years, 9 months ago

    It works! Thanks you! It’d be nice if the transition would be a bit smoother but that’s optional. Thanks again. 🙂

    Andrew Misplon

    (@misplon)

    7 years, 9 months ago

    You could transition visibility. So instead of display: none, you could say:

    transition: .3s;
    visibility: hidden;

    And then on the rule that shows the header:

    visibility: visible;

    Thread Starter turnis

    (@turnis)

    7 years, 9 months ago

    Thanks, but no matter how I change the seconds the transition is still kind of “choppy”…

    Andrew Misplon

    (@misplon)

    7 years, 9 months ago

    Please, send a link and we’ll take a look.

Viewing 7 replies - 1 through 7 (of 7 total)

The topic ‘Header Overlap – two different logos’ is closed to new replies.