如何在迷你固定菜單中顯示黑色標誌？

Question

當用戶向下滾動時，我遇到了一個在小型固定菜單中顯示徽標的問題。

主菜單中顯示的徽標是OK，但用戶向下滾動時顯示在小型固定菜單中的徽標在白色背景上顯示爲白色，因此根本不可見。

如何在白色背景上顯示黑色徽標？下面的問題的圖片：

我的網站是deil.cz

經典menu.php代碼：

<?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代碼：

<!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

嘗試過濾：

當您觸發從黑到白的菜單背景，應用過濾器的標誌：

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

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

注：根據http://caniuse.com/#search=filter，這IE不支持。

Answer 2

1）撥打第二黑色標誌並上傳到某個服務器

2）在導航

3）取下標誌圖像此代碼添加到您的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); 
} 

/路徑/當然/你的/當然只是一個例子，你必須調整它到你上傳黑暗標誌的地方。