Notice: This thread is over two years old; the information may be outdated. Please consider creating a new thread if you require free support. If you have an active SiteOrigin Premium license, you can email our premium support desk at [email protected].
How can we change the search icon hover color? It seems to be white only.
Thanks
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
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;
}
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
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.
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
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
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
THAT DID IT!!!
Mega Thanks!!
Hi Cliffd
You’re welcome. You know what to do if you need anything else.
Magus