How to show black logo in mini fixed menu?

223
January 12, 2017, at 03:29 AM

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.

READ ALSO
Bootstrap with responsive navigation

Bootstrap with responsive navigation

I have a problem with bootstrap,trying to implement my own style for navigation and to use grid system from bootstrap to stay responsiveI'm trying to make when you go to smaller devices(xs,maybe sm) navigation be something like this:

234
jQuery change css stylesheet based on element width

jQuery change css stylesheet based on element width

I'm trying to create preview for mobile devices by using a simple switch, which dynamically loads and removes stylesheet from header:

310
Ionicons line height Jekyll

Ionicons line height Jekyll

When i'm using ionicons with jekyll, line height doesn't work well

249