Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • December 23, 2014 at 11:51 pm #372331
    daniejm

    Hi there,

    Is it possible to have an Icon change color on mouseover? This would not be a linked icon. Just looking to add a small, eye-catching effect.

    Thank you,

    Joe

    December 24, 2014 at 3:34 pm #372443
    Yigit

    Hi Joe!

    Please add following code to Quick CSS in Enfold theme options under General Styling tab and adjust as needed

    .avia-icon-list .iconlist_icon:hover {
color: orange;
}

    It will change the color of iconbox icons on hover. If you can elaborate on the changes you would like to make and post the link to your website, we can help you better :)

    Cheers!
    Yigit

    December 30, 2014 at 2:40 am #372956
    daniejm
    This reply has been marked as private.
    December 30, 2014 at 12:12 pm #373034
    Yigit

    Hey!

    Please add following code to Quick CSS 

    .av-icon-char:hover {
color: red!important;
}
.av-icon-char {
border-color: green!important;
}
.av_font_icon.av-icon-style-border .av-icon-char:after {
display: none;
}

    Codes will be applied globally, however you can turn on custom CSS field for ALB elements ( http://kriesi.at/documentation/enfold/turn-on-custom-css-field-for-all-alb-elements/ ) and give your elements custom classes to make the changes individually

    Regards,
    Yigit

    January 3, 2015 at 6:35 pm #374526
    daniejm

    Hi Yigit,

    This is perfect, and the custom classes will be extremely beneficial too. Thank you so much.

    – Joe

    January 3, 2015 at 6:43 pm #374529
    daniejm

    Hey, Yigit. You had helped me on another thread too. I have a question concerning that other thread, but its closed now.

    Original thread: Float link further left

    Using padding, the Login button has been positioned to the right in the main navigation. On the mobile site, however, the Login button is positioned underneath the mobile menu. Is there a way to resolve this?

    Thank you,

    Joe

    January 5, 2015 at 2:15 am #374857
    Yigit

    Hi!

    Please add following code to Quick CSS 

    @media only screen and (max-width: 990px) {
div#header-right {
left: 0;
right: auto;
}}

    Also, please go to Enfold theme options > Header > Mobile Menu > Header Mobile Menu activation and choose 990px

    Regards,
    Yigit

    January 5, 2015 at 1:52 pm #375018
    daniejm

    Yigit,

    Perfect as always. Thank you!

    I have more question, please. On the aforementioned Development site (link), the search icon turns white on hover due to the CSS of all links in the main nav. Can the a:hover be disabled for the Search button?

    My guess is this is not applicable for the custom CSS classes. Using Chrome. I’ve tried using InspectElement but haven’t been able to find the right CSS property.

    Thank you,

    Joe

    January 5, 2015 at 2:00 pm #375024
    Yigit

    Hi!

    Please add following code to Quick CSS as well and adjust as needed

    li#menu-item-search a:hover {
color: red!important;
}

    Regards,
    Yigit

    January 5, 2015 at 2:06 pm #375031
    daniejm

    Yigit,

    You’re the man. Thank you so much!

    This thread can officially be closed! :)

    Best regards,

    Joe

    January 5, 2015 at 2:07 pm #375033
    Yigit

    Hi Joe!

    You are welcome, glad we could help :)
    For your information, you can take a look at Enfold documentation here – http://kriesi.at/documentation/enfold/
    And if there are features that you wish Enfold had, you can request them and vote the requested ones here – https://kriesi.at/support/enfold-feature-requests/
    For any other questions or issues, feel free to post them here on the forum and we will gladly try to help you :)

    Best regards,
    Yigit

  • Author
    Posts
Viewing 11 posts - 1 through 11 (of 11 total)
  • The topic ‘Change icon color on mouseover’ is closed to new replies.