Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • October 27, 2016 at 5:26 pm #704938
    Taryn

    Hello,
    On this site (http://jeanhoefling.com/) I added a custom social icon to the header and it looks great, except when you scroll and the sticky header activates – I can’t figure out how get my custom icon’s color to be blue like the other social icons in the sticky header. Can you help, please?

    Thanks!

    October 27, 2016 at 8:37 pm #705009
    Yigit

    Hey Taryn!

    You had added your icon as background image. Please add following code to Quick CSS to change the background image to blue one on hover

    #top #wrap_all .av-social-link-goodreads:hover a:before { 
background-image: url(https://kriesi.at/wp-content/themes/kriesi/images/logo.png); 
}

    Best regards,
    Yigit

    October 27, 2016 at 11:55 pm #705073
    Taryn

    Sorry – that is not what I meant. When you pull up the site, the social links in the top right are as they should be – the hover color is correct. What I mean is when you start to scroll down and the sticky header takes effect – when that happens, the other social icons are blue (before any hovering), but the custom one I added is still white. When you hover the custom one, the background color is still correct, it’s before any hovering takes place – it’s white, so it blends in with the sticky header background which is also white. Does that make sense?

    October 28, 2016 at 2:10 am #705096
    Yigit

    Hi!

    Please use following code instead

    .header-scrolled .av-social-link-goodreads:hover a { 
background-image: url(https://kriesi.at/wp-content/themes/kriesi/images/logo.png) !important; 
}

    Image needs to be changed when scrolled down, not on hover. My bad :)

    Regards,
    Yigit

    October 28, 2016 at 6:05 am #705139
    Taryn

    Hmm – nothing is happening. I don’t need a hover icon, so I also tried the code without the “hover” and still nothing.

    When you scroll and the sticky header activates, the white social icons turn to blue so you can see them against the white background of the sticky header. My custom icon is not doing this. I have a blue version of the custom icon loaded if needed. It is not the hover I’m having trouble with, it is the icon itself being white against the white background of the sticky header, so you can’t see it until you hover over that space. How can I get my custom icon to appear as blue like the other social icons on the sticky header?

    October 31, 2016 at 3:43 pm #706239
    Yigit

    Hi,

    Please use the code as following

    .header-scrolled .av-social-link-goodreads a { 
background-image: url(https://kriesi.at/wp-content/themes/kriesi/images/logo.png) !important; 
}

    Best regards,
    Yigit

    October 31, 2016 at 6:50 pm #706400
    Taryn

    I’m sorry, but it’s not working. The custom icon I have for the regular header is still showing when you scroll and the sticky header becomes active. :(

    November 1, 2016 at 2:22 pm #706714
    Yigit

    Hi,

    I added following code to style.css file of your child theme in Appearance > Editor. Please review your website now :)

    Best regards,
    Yigit

    November 2, 2016 at 12:13 am #706905
    Taryn

    Thank you – that’s working! :)

    November 2, 2016 at 2:14 pm #707095
    Yigit

    Hi,

    You are welcome! Let us know if you have any other questions or issues :)

    Best regards,
    Yigit

  • Author
    Posts
Viewing 10 posts - 1 through 10 (of 10 total)
  • The topic ‘Custom Social Icon with Sticky Header’ is closed to new replies.