CHRISTIANA000 Posted August 19, 2021 Share Posted August 19, 2021 Site URL: http://www.peachycleanatl.com I need help with custom CSS for my Squarespace website! When I hover over a tab on the website, the dropdown menu shows up as normal, but if I click that tab the text in the dropdown is invisible. (see pics below for explanation). Here is the code I used to customize my navigation bar: // Spotlight Navigation Style // .header-nav-list:hover > .header-nav-item { opacity: 0.5; } .header-nav-list:hover > .header-nav-item:hover { opacity: 1.0; } // Spotlight Navigation Folder Style // .header-nav-folder-content:hover > .header-nav-folder-item { opacity: 0.5; } .header-nav-folder-content:hover > .header-nav-folder-item:hover { opacity: 1.0; } // Pill Active Navigation // .header-nav-item--active a { background-image: none !important; background-color: #84cc3c; color: #ffffff !important; border-radius: 50px !important; padding: 0px 20px !important; } Link to comment
tuanphan Posted August 22, 2021 Share Posted August 22, 2021 Hi, Don't remove any code in your current code. Add this to Design > Custom CSS .header-nav-item--folder.header-nav-item--active .header-nav-folder-content a { color: black !important; } Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
Recommended Posts
Archived
This topic is now archived and is closed to further replies.