Home>Support>How to change Search Icon Hover Color
  1. 9 years, 4 months ago Magus
    Hi, I Work Here

    Hi Cliffd

    Please add the following to your Custom CSS

    #search-icon #search-icon-icon:hover .vantage-icon-search { 
    color: #0d376d;
}
#search-icon #search-icon-icon:hover { 
    background-color: #ffffff;
 }

    The first entry controls the colour of the icon and the second the background colour. You can change these to any valid hex colour code.

    http://www.w3schools.com/tags/ref_colorpicker.asp

    Let us know how you get on

    Magus

  2. 9 years, 4 months ago Cliffd

    No change Magus.

    This is all the css I have right now.

    /* Vantage set menu font family and font size */

    .main-navigation a {
    font-family: ‘Open Sans’, sans-serif;
    font-size: 20px;
    }

    #menu-menu-1 {
    border: 0px solid #353535;
    }

    h3 {
    color:#777777;
    margin:0;
    font-family: Ariel MS;
    font-size: 35px;
    text-align:left;
    text-shadow: 1px 1px 3px #323232;
    }

    /* Vantage Horizontal Footer Menu */

    #footer-widgets .widget.widget_nav_menu ul {
    text-align: center;
    }
    #footer-widgets .widget.widget_nav_menu li {
    display: inline-block;
    float: none;
    margin-right: 16px;
    }
    #footer-widgets .widget.widget_nav_menu li:last-of-type {
    margin-right: 0;
    }

    #short_code_si_icon {
    margin-top: -20px;
    }

    /* Container */

    #colophon {
    margin-bottom: 0;
    }

    #page-wrapper {
    padding-top: 0;
    }

    #search-icon #search-icon-icon:hover .vantage-icon-search {
    color: #0d376d;
    }
    #search-icon #search-icon-icon:hover {
    background-color: #009351;
    }

  3. 9 years, 4 months ago Magus
    Hi, I Work Here

    Hi Cliffd

    Apologies, please remove the previous CSS code. I failed to remember that a new option was added to the Customizer options. Please navigate to Appearance->Customize->Theme Settings->Menu and change the option for Search Icon Background.

    Thank You

    Magus

  4. 9 years, 4 months ago Cliffd

    Magus,

    The issue is that there is not setting to change the color of the search background hover. When I hover, it defaults to white only.

    I need it to stay green.

  5. 9 years, 4 months ago Magus
    Hi, I Work Here

    Hi Cliffd

    Please change the entry in your custom CSS for the search icon hover to this

    #search-icon #search-icon-icon:hover {
    background-color: #009351 !important;
}

    Thanks

    Magus

  6. 9 years, 4 months ago Cliffd

    Hi Magus,

    Here is my css as of late:

    /* Vantage set menu font family and font size */

    .main-navigation a {
    font-family: ‘Open Sans’, sans-serif;
    font-size: 20px;
    }

    #menu-menu-1 {
    border: 0px solid #353535;
    }

    h3 {
    color:#777777;
    margin:0;
    font-family: Ariel MS;
    font-size: 35px;
    text-align:left;
    text-shadow: 1px 1px 3px #323232;
    }

    /* Vantage Horizontal Footer Menu */

    #footer-widgets .widget.widget_nav_menu ul {
    text-align: center;
    }
    #footer-widgets .widget.widget_nav_menu li {
    display: inline-block;
    float: none;
    margin-right: 12px;
    }
    #footer-widgets .widget.widget_nav_menu li:last-of-type {
    margin-right: 0;
    }

    #short_code_si_icon {
    margin-top: -20px;
    }

    /* Container */

    #colophon {
    margin-bottom: 0;
    }

    #page-wrapper {
    padding-top: 0;
    }

    #short_code_si_icon[style] {
    text-align: right !important;
    }

    #footer-widgets .widget.widget_nav_menu li:before {
    content: “07C0a00a0”;
    }

    #footer-widgets .widget.widget_nav_menu li:first-of-type:before {
    content: none;
    margin-right: 0;
    }

    #footer-widgets .widget.widget_nav_menu li:last-of-type {
    margin-right: 0;
    }

    header #masthead {
    border-top: 1px solid #BE464F !important;
    border-left: 1px solid #BE464F !important;
    border-right: 1px solid #BE464F !important;
    }

    #menu-menu-1 {
    border-top: 1px solid #BE464F !important;
    border-left: 1px solid #BE464F !important;
    border-right: 1px solid #BE464F !important;
    }

    #search-icon {
    border-top: 0px solid #BE464F !important;
    border-left: 1px solid #BE464F !important;
    border-right: 1px solid #BE464F !important;
    }

    #main-slider {
    border-left: 1px solid #BE464F !important;
    border-right: 1px solid #BE464F !important;
    }

    #main {
    border-left: 1px solid #BE464F !important;
    border-right: 1px solid #BE464F !important;
    }

    #colophon {
    border-left: 1px solid #BE464F !important;
    border-right: 1px solid #BE464F !important;
    border-bottom: 1px solid #BE464F !important;
    }

    #search-icon #search-icon-icon:hover .vantage-icon-search {
    color: #009351;
    }
    #search-icon #search-icon-icon:hover {
    background-color: #009351;
    }
    ———————————————————————————————

    the Search Icon when I hover still goes to white. I need it to stay green.
    Any other ideas?

    Thanks

  7. 9 years, 4 months ago Magus
    Hi, I Work Here

    Hi Cliffd

    I can see the issue.

    Please remove this entry

    #search-icon #search-icon-icon:hover .vantage-icon-search {
 color: #009351;
 }

    and replace the second entry with this

    #search-icon #search-icon-icon:hover {
 background-color: #009351 !important;
 }

    Magus

  8. 9 years, 4 months ago Cliffd

    THAT DID IT!!!

    Mega Thanks!!

  9. 9 years, 4 months ago Magus
    Hi, I Work Here

    Hi Cliffd

    You’re welcome. You know what to do if you need anything else.

    Magus

Replies on this thread are closed. Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.

Get The Most Out of SiteOrigin with SiteOrigin Premium

Find Out More