How to change logo in php header when change the header js class and CSS

Question

Many time i have found a lot of solution on this pages and thanks for every help! I hope i can found one more new! :-)

I need change logo in header, Now, when js work make a new class, with css I make a new layout but the logo is in php file...

So: when the page scroll the header change, but i can not change the logo in the header because is in php and with the css i cann't found a solution

This is the php code:

<!-- header -->
<header class="header clear" role="banner">

    <!-- logo -->
    <div class="logo">
        <a href="<?php echo home_url(); ?>">
            <img src="<?php echo get_template_directory_uri(); ?>/img/logo.png" alt="Logo" class="logo-img">
        </a>

    </div>
    <!-- /logo -->

this is the js (i don't know if need to know)

$(document).ready (function () {
    $(window).scroll (function () {
        var sT = $(this).scrollTop();
            if (sT >= 100) {
                $('.header').addClass('cambio_header')
            }else {
                $('.header').removeClass('cambio_header')
            }
    })
})

Some one have idea how write the php? (the web site is make whit Wordpress)

Thanks so much!

I don't understand what you are trying to do. You can always use jQuery to change the logo src attribute. e.g. $('.header .logo img').attr('src','something'); — odedta
– odedta, Commented Oct 29, 2015 at 12:55
I want change the logo in the header, but i cann't, i don't know how change this php code. or what ever. anyway thanks for reply. I'm don't know how use jqery in this case. — Marco Romano
– Marco Romano, Commented Oct 29, 2015 at 13:00

Steve · Accepted Answer · 2015-10-29 13:06:33Z

1

You could change the image in your javascript:

$(document).ready (function () {
    var logo-top = '/url/to/logo.jpg';
    var logo-scroll = 'url/to/logo-scroll.jpg';
    $(window).scroll (function () {
        var sT = $(this).scrollTop();
            if (sT >= 100) {
                $('.header').addClass('cambio_header').find('img.logo-img').attr('src', logo-scroll);
            }else {
                $('.header').removeClass('cambio_header').find('img.logo-img').attr('src', logo-top);
            }
    });
});

Or you could add both logos in the php file, and hide/show them with a css rule

<div class="logo">
    <a href="<?php echo home_url(); ?>">
        <img src="<?php echo get_template_directory_uri();?>/img/logo.png" alt="Logo" class="logo-img">
        <img src="<?php echo get_template_directory_uri();?>/img/logo-scroll.png" alt="Logo" class="logo-img scroll">
    </a>
</div>

.header .logo-img.scroll{
    display:none;
}
.header.cambio_header .logo-img{
    display:none;
}
.header.cambio_header .logo-img.scroll{
    display:block;
}

edited Oct 29, 2015 at 13:06

answered Oct 29, 2015 at 12:59

Steve

20.5k5 gold badges47 silver badges71 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Steve Over a year ago

Great, glad i could help you

Marco Romano Over a year ago

You have taught me something good today! I don't have thinks to add a class and play with that! Only try to use if and elsa, but lost me in this!

spy Over a year ago

which php file is that?I mean that you added the above code?

Steve Over a year ago

@spy depends on your theme, but most likely header.php

spy Over a year ago

@Steve Thanks for your time.Also where do i find that specific javascript in my theme?I ve checked in the js file but i cant tell which one is the one responsible for the sticky header

|

Blady214 · Accepted Answer · 2015-10-29 14:06:54Z

0

I think that better way could be to place logo in CSS and in PHP will be only container for this logo. Then, when you will change the CSS, logo will be also changed.

<div id="logo-container"></div>

#logo-container {
    width: logo_width;
    height: logo-height;
    background: url('path/ot/logo') cover;
}

answered Oct 29, 2015 at 14:06

Blady214

7396 silver badges19 bronze badges

Collectives™ on Stack Overflow

How to change logo in php header when change the header js class and CSS

2 Answers 2

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related