css - 如何在迷你固定菜单中显示黑色标志？

Question

当用户向下滚动时，我在固定小菜单中显示 Logo 时遇到了一个问题。

在主菜单中显示的 Logo 是可以的，但是在小固定菜单中显示的 Logo ，当用户向下滚动时，在白色背景上显示为白色，因此根本看不到。

如何在白色背景上显示黑色 Logo ？以下问题的图片:

我的网站是deil.cz

经典菜单.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

尝试过滤:

当您触发菜单背景从黑色变为白色时，对 Logo 应用滤镜:

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

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

注:根据http://caniuse.com/#search=filter , IE 不支持。