Show small logo only on mobile screens due to logo overflow

Hi,

In the header, I have the main logo (.logo), but on narrow screens (tablet & mobile) it covers the menu and overflows.

So, I created another logo (logo-full-sml.png 192pxx35px) to show on narrow screens.

I added this to functions.php:

/ Show small logo on mobile screens
add_filter('avf_logo_subtext', 'kriesi_logo_addition');
function kriesi_logo_addition($sub) {
    $sub .= "<a href='#'><img src='http://www.newsite.proofscience.com/wp-content/uploads/2015/08/logo-full-sml.png' /></a>";
    return $sub;

And this to style.css:

/*Second logo on small screens*/
@media only screen and (min-width: 400px) {
.second-logo { display: none; }}

@media only screen and (max-width: 400px) { 
.logo { display: none; }}

Now, when I reduce the screen width the second logo appears but the main logo does not display: none

I’ve been playing with this for a week or so but have hit a wall.
Any ideas how to hide the main logo?

• This topic was modified 9 years, 4 months ago by Barnez1.