Wie zeigt man ein schwarzes Logo im Mini-Menü?

Question

Ich habe ein Problem mit dem Anzeigen eines Logos in einem kleinen festen Menü, wenn der Benutzer nach unten scrollt.

Das Logo, das im Hauptmenü angezeigt wird, ist OK, aber das Logo, das im kleinen festen Menü angezeigt wird, wenn der Benutzer nach unten scrollt, wird weiß auf weißem Hintergrund angezeigt, sodass es überhaupt nicht sichtbar ist .

Wie kann ich ein schwarzes Logo auf einem weißen Hintergrund zeigen? Bild der Ausgabe unter:

Meine Website ist deil.cz

classic-menu.php Code:

<?php 

$post_id = get_the_ID(); 

if(is_home() && get_option('page_for_posts') != '') { 

    $post_id = get_option('page_for_posts'); 

}else if(is_front_page() && get_option('page_on_front') != '') { 

    $post_id = get_option('page_on_front'); 

}else if(function_exists('is_shop') && is_shop() && get_option('woocommerce_shop_page_id') != '') { 

    $post_id = get_option('woocommerce_shop_page_id'); 

}elseif($wp_query && !empty($wp_query->queried_object) && !empty($wp_query->queried_object->ID)) { 

    $post_id = $wp_query->queried_object->ID; 
} 


$menu_width = get_iron_option('classic_menu_width'); 
$menu_align = get_iron_option('classic_menu_align'); 
$menu_position = get_iron_option('classic_menu_position'); 
$menu_effect = get_iron_option('classic_menu_effect'); 
$menu_logo_align = get_iron_option('classic_menu_logo_align'); 

$menu_is_over = get_field('classic_menu_over_content', $post_id); 
if(!empty($menu_is_over)) { 
    if($menu_position == 'absolute absolute_before') { 
     $menu_position = 'absolute'; 
    }else{ 
     $menu_position = 'fixed'; 
    } 
} 

$container_classes = array(); 
$container_classes[] = 'classic-menu'; 
$container_classes[] = $menu_effect; 
$container_classes[] = $menu_position; 


$menu_classes = array(); 
$menu_classes[] = 'menu-level-0'; 
$menu_classes[] = $menu_align; 
$menu_classes[] = $menu_width; 

if($menu_logo_align == 'pull-top') 
    $menu_classes[] = 'logo-pull-top'; 

$hotlinks_align = 'pull-right'; 


?> 

<div class="<?php echo implode(" ", $container_classes); ?>" 
data-site_url="<?php echo esc_url(home_url('/')); ?>" 
data-site_name="<?php echo esc_attr(get_bloginfo('name')); ?>" 
data-logo="<?php echo esc_url(get_iron_option('header_logo')); ?>" 
data-logo_page="<?php echo esc_url(get_field('classic_menu_logo', $post_id) ); ?>" 
data-retina_logo="<?php echo esc_url(get_iron_option('retina_header_logo')); ?>" 
data-logo_mini="<?php echo esc_url( get_iron_option('classic_menu_header_logo_mini')); ?>" 
data-logo_align="<?php echo esc_attr($menu_logo_align); ?>"> 
<?php 
echo wp_nav_menu(array(
    'container' => false, 
    'theme_location' => 'main-menu', 
    'menu_class' => implode(" ", $menu_classes), 
    'echo' => false, 
    'fallback_cb' => '__return_false' 
)); 
?> 

<?php 
$top_menu_enabled = (bool)get_iron_option('header_top_menu_enabled'); 
$menu_items = get_iron_option('header_top_menu'); 
$menu_icon_toggle = (int)get_iron_option('header_menu_toggle_enabled'); 
?> 
<?php if($top_menu_enabled && !empty($menu_items)): ?> 

<!-- social-networks --> 
<ul class="classic-menu-hot-links <?php echo (!empty($_GET["mpos"]) ? esc_attr($_GET["mpos"]) : get_iron_option('menu_position')); ?>"> 
    <?php foreach($menu_items as $item): ?> 
    <?php 
    if(!empty($item["menu_page_external_url"])) { 
     $url = $item["menu_page_external_url"]; 
    }else{ 
     $url = get_permalink($item["menu_page_url"]); 
    } 
    $target = $item["menu_page_url_target"]; 
    $hide_page_name = !empty($item["menu_hide_page_title"]) ? (bool)$item["menu_hide_page_title"] : false; 
    ?> 
     <li class="hotlink <?php echo $hotlinks_align;?>"> 
     <a target="<?php echo esc_attr($target);?>" href="<?php echo  esc_url($url); ?>"> 

      <?php if(!empty($item["menu_page_icon"])): ?> 
      <i class="fa fa-<?php echo esc_attr($item["menu_page_icon"]); ?>" title="<?php echo esc_attr($item["menu_page_name"]); ?>"></i> 
      <?php endif;?> 

      <?php if(!$hide_page_name): ?> 
       <?php echo esc_html($item["menu_page_name"]); ?> 
      <?php endif; ?> 

      <?php if(function_exists('is_shop')): ?> 

       <?php global $woocommerce; ?> 

       <?php if (!empty($item["menu_page_url"]) && (get_option('woocommerce_cart_page_id') == $item["menu_page_url"]) && $woocommerce->cart->cart_contents_count > 0): ?> 

        <span>(<?php echo esc_html($woocommerce->cart->cart_contents_count);?>)</span> 

       <?php endif; ?> 

      <?php endif; ?> 
     </a> 
    </li> 
    <?php endforeach; ?> 
</ul> 
<div class="clear"></div> 

<?php endif; ?> 

header.php Code:

<!DOCTYPE html> 
<html <?php language_attributes(); ?> class="<?php echo (is_admin_bar_showing())? 'wp-admin-bar':''?> "> 
<head> 
<meta charset="<?php bloginfo('charset'); ?>"> 
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0"> 
<?php 
if (! function_exists('_wp_render_title_tag')) : 
    function theme_slug_render_title() { 
?> 
<title><?php wp_title('-', true, 'right'); ?></title> 
<?php 
    } 
    add_action('wp_head', 'theme_slug_render_title'); 
endif;?> 
<?php wp_head(); ?> 
</head> 
<body <?php body_class("layout-wide"); ?> onload="jQuery('header').animate({'opacity': 1})"> 
<?php 
$facebook_appid = get_iron_option('facebook_appid'); 
if(!empty($facebook_appid)) { ?> 
    <script> 
     window.fbAsyncInit = function() { 
     FB.init({ 
      appId  : '<?php echo esc_html($facebook_appid);?>', 
      xfbml  : true, 
      version : 'v2.1' 
     }); 
     }; 

     (function(d, s, id){ 
     var js, fjs = d.getElementsByTagName(s)[0]; 
     if (d.getElementById(id)) {return;} 
     js = d.createElement(s); js.id = id; 
     js.src = "//connect.facebook.net/en_US/sdk.js"; 
     fjs.parentNode.insertBefore(js, fjs); 
     }(document, 'script', 'facebook-jssdk')); 
    </script> 
    <div id="fb-root"></div> 
<?php } ?> 

<div id="overlay"></div> 

<?php 
$fixed_header = get_iron_option('enable_fixed_header'); 
$menu_type = get_iron_option('menu_type'); 
$menu_position = get_iron_option('classic_menu_position'); 
$menu_is_over = get_field('classic_menu_over_content', get_the_ID()); 

if(!empty($menu_is_over)) { 
    if($menu_position == 'absolute absolute_before') { 
     $menu_position = 'absolute'; 
    }else{ 
     $menu_position = 'fixed'; 
    } 
} 

?> 

<?php if($menu_type == 'push-menu'): ?> 
    <?php get_template_part('parts/push', 'menu'); ?> 
<?php endif; ?> 


<?php if($menu_type == 'classic-menu' && $menu_position != 'absolute' && $menu_position != 'absolute absolute_before'): ?> 

    <?php get_template_part('parts/classic', 'menu'); ?> 

<?php endif; ?> 

<?php if(($menu_type == 'push-menu' && empty($fixed_header)) || ($menu_type == 'classic-menu' && ($menu_position == 'fixed' || $menu_position == 'fixed_before'))) : ?>  
<div id="pusher" class="menu-type-<?php echo esc_attr($menu_type);?>"> 
<?php endif; ?> 

<?php if($menu_type == 'push-menu'): ?> 
<header class="opacityzero"> 
    <div class="menu-toggle"> 
     <?php echo  wp_remote_retrieve_body(wp_remote_request(get_template_directory_uri().'/images/  svg/menu_icon.svg')); ?> 
    </div> 
    <?php get_template_part('parts/top-menu'); ?> 

    <?php if(get_iron_option('header_logo') !== ''): ?> 
    <a href="<?php echo esc_url(home_url('/'));?>" class="site-logo"> 
     <img id="menu-trigger" class="logo-desktop regular" src="<?php echo esc_url(get_iron_option('header_logo')); ?>" <?php echo (get_iron_option('retina_header_logo'))? 'data-at2x="' . esc_url( get_iron_option('retina_header_logo')) .'"':''?> alt="<?php echo esc_attr( get_bloginfo('name')); ?>"> 
    </a> 
    <?php endif; ?> 
</header> 
<?php endif; ?> 


<?php if(($menu_type == 'push-menu' && !empty($fixed_header)) || ($menu_type == 'classic-menu' && ($menu_position != 'fixed' || $menu_position == 'fixed_before'))) : ?> 
<div id="pusher" class="menu-type-<?php echo esc_attr($menu_type);?>"> 
<?php endif; ?> 


    <?php if($menu_type == 'classic-menu' && ($menu_position == 'absolute' || $menu_position == 'absolute absolute_before')): ?> 

     <?php get_template_part('parts/classic', 'menu'); ?> 

    <?php endif; ?> 

    <div id="wrapper"> 

Answer 1

Try Filter:

.classic-menu-logo {filter: invert(.8) } 

https://css-tricks.com/almanac/properties/f/filter/

Hinweis:

Wenn Sie Ihr Menü Hintergrund von Schwarz auf Weiß auslösen, einen Filter auf das Logo gelten nach http://caniuse.com/#search=filter, diese wird nicht von IE unterstützt.

Answer 2

1) Machen Sie ein zweites schwarzes Logo und laden Sie sich irgendwo auf dem Server

2) Entfernen Sie das Logo-Bild aus dem Navigations

3) Fügen Sie diesen Code auf Ihre style.css:

.classic-menu > ul > li.logo a { 
    width: 120px; 
    height: 30px; 
    background: url(/wp-content/uploads/2016/12/White2.png); 
    background-size: contain; 
} 
.classic-menu.mini > ul > li.logo a { 
    background-image: url(/path/to/your/black.png); 
} 

/Pfad/zu/Ihrer/ist natürlich nur ein Beispiel, Sie müssen es anpassen, wo Sie das dunkle Logo hochgeladen haben.