Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • November 13, 2013 at 12:13 pm #187719
    catvine

    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.

    November 13, 2013 at 9:17 pm #188003
    Yigit

    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

    November 17, 2013 at 10:24 am #189779
    catvine

    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

    November 18, 2013 at 3:24 pm #190103
    Devin

    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

    November 18, 2013 at 5:46 pm #190191
    basilicon

    At least add:

    .header-scrolled .logo {
    padding-top: 0px;
}
    November 19, 2013 at 11:46 am #190527
    Dude

    Hey!

    …

    Cheers!
    Peter

    November 21, 2013 at 3:10 pm #191452
    catvine

    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

  • Author
    Posts
Viewing 7 posts - 1 through 7 (of 7 total)
  • The topic ‘change logo image for scrolled header’ is closed to new replies.