Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • September 9, 2017 at 2:15 am #849789
    trikosm

    Hi there,

    I have add img in header area, next to logo. But my img dont resize like logo? Can you tell me how to do that.

    I would like to have same effect like logo when I sroll down site, logo get smaller. But my img in widget near logo have same size.

    Ths..

    September 9, 2017 at 9:51 pm #850004
    Mike

    Hey trikosm,
    Try adding this code to the end of your functions.php file in Appearance > Editor:

    function add_header_img_scrolled(){
?>
<script>

jQuery(document).scroll(function(){

    if(jQuery(this).scrollTop() > 100)

    {   
       jQuery('#media_image-2').css({"max-width":"50%"});

    } else {

       jQuery('#media_image-2').css({"max-width":"100%"});
    }

});

</script>
<?php

}

add_action('wp_footer', 'add_header_img_scrolled');

    Best regards,
    Mike

    September 10, 2017 at 9:05 am #850076
    trikosm

    Hey Mike,
    Ths for reply. I do it like you say, but still is the same.
    Maybe I did not explain it clearly to you.
    I first made a widget named “header”, in which I add image. After that, I add some css code found here in one post:
    #header .widget {
    left: 50%;
    padding-top: 0;
    position: absolute;
    top: 0;
    transform: translate(-50%);
    z-index: 999;
    }

    inserting your code into the function.php nothing happens, everything is the same.
    I’m using child theme and I put code into function.php of child theme.

    September 10, 2017 at 5:10 pm #850148
    Mike

    Hi,
    Ok, remove the first code I gave you and Try this code in the General Styling > Quick CSS field:

    #header.header-scrolled .widget_media_image img {
height: 40px !important; width: 40px !important;
}

    Please clear your cache :)

    Best regards,
    Mike

    September 15, 2017 at 3:15 pm #852566
    trikosm

    Ths Mike,

    This code works OK.

    With this code I got the effect I wanted.

    September 15, 2017 at 11:10 pm #852716
    Jordan Shannon

    Hi,

    I’m glad you got this corrected. If you need additional help, please let us know here in the forums.

    Best regards,
    Jordan Shannon

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • The topic ‘How to add resizable img in header (like logo)’ is closed to new replies.