How to show black logo in mini fixed menu? - css

Question

I have one issue with showing a logo in a small fixed menu, when the user scrolls down.
The logo that is shown in the main menu is OK, but the logo that is shown in the small fixed menu, when the user scrolls down, is shown in white on a white background, so it is not visible at all.
How can I show a black logo on a white background? Image of the issue below:
My site is 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:
When you trigger your menu's background from black to white, apply a filter to the logo:
.classic-menu-logo {filter: invert(.8) }
https://css-tricks.com/almanac/properties/f/filter/
Note: according to http://caniuse.com/#search=filter, this is not supported by IE.

Answer 2

1) Make a second black logo and upload it somewhere to your server
2) Remove the logo image from the navigation
3) Add this code to your 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);
}
/path/to/your/ is of course only an example, you must adjust it to where you have uploaded the dark logo.