I have selected a menu icon for each of the 4 menus. When you are on the page, the icon changes colors, which is wonderful. But when you click "Locations", the Contact icon disappears. But it does show correctly for Pricing, and Home page, etc.
The disappearing "Contact" icon is likely caused by a CSS conflict where the "active" or "current-menu-item" state of the Locations page is inadvertently hiding the icon for the next menu item.
The CSS Fix
To ensure all icons remain visible regardless of which page is active, please add this code to Salient > General Settings > CSS/Script Related > Custom CSS Code:
/* Force menu icons to remain visible in all navigation states */
#header-outer .main-nav > ul > li > a i,
#header-outer .main-nav > ul > li.current-menu-item > a i,
#header-outer .main-nav > ul > li.current_page_item > a i {
opacity: 1 !important;
visibility: visible !important;
display: inline-block !important;
}
/* Ensure the 'Contact' icon inherits the correct color on the Locations page */
#header-outer .main-nav > ul > li > a:hover i,
#header-outer .main-nav > ul > li.current-menu-item > a i {
color: inherit !important;
}
Hope this helps!
Should you have any further questions or need assistance along the way, please don’t hesitate to reach out.
I have selected a menu icon for each of the 4 menus. When you are on the page, the icon changes colors, which is wonderful. But when you click "Locations", the Contact icon disappears. But it does show correctly for Pricing, and Home page, etc.
Can you help?
Attached files: Screenshot 2026-01-19 at 10.09.03 AM.png
Screenshot 2026-01-19 at 10.09.11 AM.png
Hello David,
Thanks for writing in!
The disappearing "Contact" icon is likely caused by a CSS conflict where the "active" or "current-menu-item" state of the Locations page is inadvertently hiding the icon for the next menu item.
The CSS FixTo ensure all icons remain visible regardless of which page is active, please add this code to Salient > General Settings > CSS/Script Related > Custom CSS Code:
/* Force menu icons to remain visible in all navigation states */ #header-outer .main-nav > ul > li > a i, #header-outer .main-nav > ul > li.current-menu-item > a i, #header-outer .main-nav > ul > li.current_page_item > a i { opacity: 1 !important; visibility: visible !important; display: inline-block !important; } /* Ensure the 'Contact' icon inherits the correct color on the Locations page */ #header-outer .main-nav > ul > li > a:hover i, #header-outer .main-nav > ul > li.current-menu-item > a i { color: inherit !important; }Hope this helps!
Should you have any further questions or need assistance along the way, please don’t hesitate to reach out.
Best,