Home>Support>Overflow Logo Over Menu (Logo in Menu Setting) + Different logo for individual pages

Overflow Logo Over Menu (Logo in Menu Setting) + Different logo for individual pages

Hello Vantage team,

I hope everything is going great, we keep developing websites with your awesome theme (Vantage) but have encountered the following challenges:

1. Is there a way to have a logo with the logo in menu settings that overflows the menu bar.
i.e.: http://margherita.mx/wp-content/uploads/2015/09/Screen-shot-2015-09-28-at-12.26.43-PM.png
(maybe z-index can do the trick?)

2. How can we add a different logo (different from the one on theme settings) to an individual page. We would like this page to have its own logo: http://margherita.mx/catering-eventos/

This is all for the moment,
hope you guys can help! Thanks in advance,
J.

URL: http://margherita.mx

This is our free support forum. Replies can take several days. If you need fast email support, please purchase a SiteOrigin Premium license.

  1. 8 years, 11 months ago Andrew Misplon
    Hi, I Work Here

    Hi Jose

    Thanks for reaching out. All good our side.

    1. How’s your CSS :) You basically need to use Custom CSS and absolute position the logo. You’d also need to re-position the menu as a result and re-adjust it all for mobile. It’s a custom development task.

    2. Also a custom development job, outside our scope, we can advise though. Use a child theme, create a parts folder, insert masthead.php and change line 9. Use conditionals to render the normal logo for all pages and render your custom logo for the page you want:

    https://codex.wordpress.org/Conditional_Tags

    Hope that helps get you started.

  2. 8 years, 11 months ago Jose AMezcua

    Hey Andrew,

    Thanks for the great support,

    We succesfully worked out point 1 and are now working on point 2 and we have the following doubt:

    Currently we made the child theme as instructed, found line 9 in the masthead.php and are stuck trying to find out how to call the other logo so that we can modify line 9.

    any ideas?

    thanks
    JP

  3. 8 years, 11 months ago Andrew Misplon
    Hi, I Work Here

    Hey Jose

    We can’t really assist much further than I have already. This is custom development territory. If you can do the work then that’s great but if not, we, unfortunately aren’t able to do it for you in our current support setup. In broad terms you need to use a PHP conditional statement:

    http://www.w3schools.com/php/php_if_else.asp

    using WordPress conditional tags:

    https://codex.wordpress.org/Conditional_Tags

    To load your different logos at different times.

    You can load a static image in the theme file using:

    https://codex.wordpress.org/Function_Reference/get_stylesheet_directory_uri

    That’s assuming your logo is stored in the child theme. You could also just call your image using a regular img tag:

    http://www.w3schools.com/tags/tag_img.asp

  4. 8 years, 11 months ago Jose AMezcua

    Hello Vantage Team,

    we know you canĀ“t really assist us with our issue: Having different logos on different pages and we are doing this with our own developers but we are hoping you can point us in the right direction again. We already tried the las suggestions but with no luck.

    This is what we did:

    Modified header.php with If-else with two different codes:

    	<?php
    	/**
    	 * Part Name: Default Masthead
    	 */
    	?>
    
    	<header id="masthead" class="site-header" role="banner">
    		 <?php
    	$logoSlug = 'http://margherita.mx/wp-content/uploads/2015/10/LOGO-MARGHERITA-PIZZERIA-menu'; // Default
    				if (is_page('http://margherita.mx/catering-eventos/')) {
    					$logoSlug = 'http://margherita.mx/wp-content/uploads/2015/09/hellofood-logo.png'; //assuming that the about-us page has a logo_blue.png logo
    					} elseif ( ! is_page('http://margherita.mx/catering-eventos/')) {
    					$logoSlug = 'http://margherita.mx/wp-content/uploads/2015/10/LOGO-MARGHERITA-PIZZERIA-menu'; //assuming that the services/work page has a logo_white.png logo
    					} //continue along that way. Might be ways to do it with a switch, but this is the quickest I can think of
    	?>
    	<img src="http://margherita.mx/wp-content/uploads/2015/10/LOGO-MARGHERITA-PIZZERIA-menu<?php echo $logoSlug; ?>.png" alt="Photo Lab">
    		<div class="hgroup full-container">
    			<a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home" class="logo"><?php vantage_display_logo(); ?></a>
    			<?PHP/*
    					<?php if( is_active_sidebar('template-full-notitle.php') ) : ?>
    				*/?>
    			<?php if( is_active_sidebar('sidebar-header') ) : ?>
    
    				<div id="header-sidebar" <?php if( siteorigin_setting('logo_no_widget_overlay') ) echo 'class="no-logo-overlay"' ?>>
    					<?php
    					// Display the header area sidebar, and tell mobile navigation that we can use menus in here
    					add_filter('siteorigin_mobilenav_is_valid', '__return_true');
    					dynamic_sidebar( 'sidebar-header' );
    					remove_filter('siteorigin_mobilenav_is_valid', '__return_true');
    					?>
    				</div>
    
    			<?php else : ?>
    
    				<div class="support-text">
    					<?php do_action('vantage_support_text'); ?>
    				</div>
    
    			<?php endif; ?>
    
    		</div><!-- .hgroup.full-container -->
    
    		<?php get_template_part( 'parts/menu', apply_filters( 'vantage_menu_type', siteorigin_setting( 'layout_menu' ) ) ); ?>
    
    	</header><!-- #masthead .site-header -->
    

    and

    function mms_current_page_url() {
        $pageURL = 'http://margherita.mx/;
        if( isset($_SERVER["HTTPS"]) ) {
            if ($_SERVER["HTTPS"] == "on") {$pageURL .= "s";}
        }
        $pageURL .= "http://margherita.mx/";
        if ($_SERVER["SERVER_PORT"] != "80") {
            $pageURL .= $_SERVER["SERVER_NAME"].":".$_SERVER["SERVER_PORT"].$_SERVER["REQUEST_URI"];
        } else {
            $pageURL .= $_SERVER["SERVER_NAME"].$_SERVER["REQUEST_URI"];
        }
        return $pageURL;
    }
    
    add_action('wp_head', 'mms_change_logo_on_each_page' );
    function mms_change_logo_on_each_page(){
        if(mms_current_page_url() == 'http://margherita.mx/'):
        ?>
    <script>
        jQuery(document).ready(function(){
            jQuery('#logo a img').attr('src', 'http://margherita.mx/wp-content/uploads/2015/09/LOGO-MARGHERITA-PIZZERIA-FOOTER.png');<!-- LOGO -->
        })
    </script>
     <?php
     elseif(mms_current_page_url() == 'http://margherita.mx/' ):					
        ?>
    <script>
        jQuery(document).ready(function(){
            jQuery('#logo a img').attr('src', 'http://margherita.mx/wp-content/uploads/2015/09/LOGO-MARGHERITA-PIZZERIA-FOOTER.png');<!-- LOGO MENU-- -->
        })
    </script>
        <?php
     elseif(mms_current_page_url() == 'http://margherita.mx/menu/' ): 	//PAGINA MENU
         ?>
    <script>
        jQuery(document).ready(function(){
            jQuery('#logo a img').attr('src', 'http://margherita.mx/wp-content/uploads/2015/09/hellofood-logo.png');<!-- LOGO PARA CUSTOME-->
        })
    </script>
    <?php
     elseif(mms_current_page_url() == 'http://margherita.mx/catering-eventos/' )://PAGINA ESPECIAL
         ?>
    <script>
        jQuery(document).ready(function(){
            jQuery('#logo a img').attr('src', 'http://margherita.mx/wp-content/uploads/2015/09/LOGO-MARGHERITA-PIZZERIA-FOOTER.png');<!-- LOGO PARA PAG MENU-->
        })
    </script>
    <?php
     elseif(mms_current_page_url() == 'http://margherita.mx/cotiza-tu-evento/' ):
         ?>
    <script>
        jQuery(document).ready(function(){
            jQuery('#logo a img').attr('src', 'http://margherita.mx/wp-content/uploads/2015/09/LOGO-MARGHERITA-PIZZERIA-FOOTER.png');<!-- LOGO PARA COTIZADOR-->
        })
    </script>
    <?php
     elseif(mms_current_page_url() == 'http://margherita.mx/contacto/' ):
         ?>
    
    
    <?php
     endif;
    }
    

    Hope you can help us out but if its really not possible, don’t worry we understand! Your support has been supreme all the time and we appreciate it a lot.

    Thanks
    J

  5. 8 years, 11 months ago Andrew Misplon
    Hi, I Work Here

    Hey J :)

    I’d create a “parts” folder in the child theme and put a copy of masthead.php in the parts folder copied from the parent.

    Find this line:

    <a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home" class="logo"><?php vantage_display_logo(); ?></a>
    

    Replace it with something like this:

    		<?php if ( is_page( 1929 ) ) : ?>
    			<a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home" class="logo"><img src="http://localhost/siteorigin/wp-content/uploads/2015/07/Internal-Storage.jpg" /></a>
    		<?php else : ?>
    			<a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home" class="logo"><?php vantage_display_logo(); ?></a>
    		<?php endif; ?>
    

    Replace my page ID 1929 with the page ID of the page you need the new logo on. Replace my localhost image URL with yours. Should do the trick.

Replies on this thread are closed. Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.

Get The Most Out of SiteOrigin with SiteOrigin Premium

Find Out More