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

    Hi

    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("http://vinefruit.net/clients/coffeeplanetFS/wp-content/uploads/logo-small.png");
    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:

    http://vinefruit.net/clients/coffeeplanetFS

    Thanks Catherine.

    #188003

    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,
    Yigit

    #189779

    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

    #190103

    Hey!

    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.

    Regards,
    Devin

    #190191

    At least add:

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

    Hey!

    Cheers!
    Peter

    #191452

    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.

    Thanks

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

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