Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
  • #187719


    I am loving this theme I have to say, but am struggling with a small tweak on the logo image.

    I am using the fixed header with social icons and am happy with the way it looks.

    I like the scroll action but find that the logo becomes quite small once resized this way and tricky to read.

    I would like to replace the image file used in the header once the scroll is active – from the fullsize logo.png to logo-smaller.png (which is the logo trimmed)

    I tried setting this using the css below but all that happens is the trimmed logo ends up behind the resized version.

    .header-scrolled .logo img { 
    padding: 5px 5px; 
    background-image: url("");
    background-repeat: no-repeat;

    The site is still under construction so please ignore the home page as this is not complete, but the menu and logo can be seen here:

    Thanks Catherine.


    Hi catvine!

    Please go to wp-content\themes\enfold\js folder and open avia.js file and find

     el_height       = $(elements).filter(':first').height(),

    and change it to

     el_height       = 200,

    200 here represents 200pixels. You can change the value so the header size would be the half of it when scrolled

    Best regards,


    Hi Yigit

    Sorry for the slow reply.

    I tried your suggested change. Unfortunately it looks ugly like that as you lose the breadcrumbs. And if you scroll back up too far you get a massive header that is completely out of proportion.

    As I said I am happy with the scroll action and the way it looks – I just wanted to use a trimmed logo image in place of the full logo when the scroll is activated.

    If that isn’t possible then I will have to use a trimmed version of the logo in both instances.

    On a separate note is it possible to add an background image to the div.container of the header?

    Many thanks



    As is there isn’t a mechanism in place to support two different images for the logo so your best route would be to use a smaller logo as your standard header logo.

    For the header, you can change its background and styling in the theme options Styling section under the Header tab.



    At least add:

    .header-scrolled .logo {
        padding-top: 0px;




    Thanks all

    For now I have just added some padding to the top of the logo so that once scrolled the bottom tag line piece is hidden.

    If that doesn’t work for my client then I will use a logo without the tag line.


Viewing 7 posts - 1 through 7 (of 7 total)

The topic ‘change logo image for scrolled header’ is closed to new replies.