Swede61 Posted October 21, 2022 Share Posted October 21, 2022 Hello everyone I have managed to change appearance on my site navigation when viewing in desktop mode and it works like a charm. I used the following coding: .header-nav-item:hover>a, .header-nav-folder-item:hover a { color: #fc0 !important; } .header-nav-item--active>a, .header-nav-folder-item--active>a, .header-menu-nav-item--active>a .header-menu-nav-item--active { color: #fc0 !important; } .header-nav-item--active a { background-image: none !important;; } But I can't get it to work in the hamburger menu, the links are still underlined and isn't changing color when active. I have searched the forums and tried a number of different suggestions, but none of the work. Any help would be highly appreciated. Link to comment
Beyondspace Posted October 21, 2022 Share Posted October 21, 2022 1 hour ago, Swede61 said: Hello everyone I have managed to change appearance on my site navigation when viewing in desktop mode and it works like a charm. I used the following coding: .header-nav-item:hover>a, .header-nav-folder-item:hover a { color: #fc0 !important; } .header-nav-item--active>a, .header-nav-folder-item--active>a, .header-menu-nav-item--active>a .header-menu-nav-item--active { color: #fc0 !important; } .header-nav-item--active a { background-image: none !important;; } But I can't get it to work in the hamburger menu, the links are still underlined and isn't changing color when active. I have searched the forums and tried a number of different suggestions, but none of the work. Any help would be highly appreciated. Can you share the site URL so we can take a look? BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox) 🗓️ Delivery Date Picker (Squarespace Date format) 💫 Animated Buttons (Referral URL) 🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations) 🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates) If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you! Link to comment
Swede61 Posted October 21, 2022 Author Share Posted October 21, 2022 Yes the site url is: http://toolex.net Link to comment
Solution ghostplugins Posted October 21, 2022 Solution Share Posted October 21, 2022 (edited) Hey @Swede61 👋 Try this CSS! // Remove Mobile Menu Active Nav Line - Ghost // .header-menu-nav-list .header-menu-nav-item * { background-image: none !important; } Edited October 21, 2022 by ghostplugins Cody and Team, The Ghost Co. 👻 Ghost Plugins: 500+ free plugins and templates for Squarespace🎉 Ghost Marketplace: The very first product-based marketplace for Squarespace💙 Circle Story: Thank you, Squarespace! Link to comment
Swede61 Posted October 22, 2022 Author Share Posted October 22, 2022 Perfect thank you - that did it with the underline. I then tried to get the active menu item to show a different color with the following code: .header-menu-nav-list .header-menu-nav-item--active { color: #fc0 !important; } But that didn't work 😒 Link to comment
tuanphan Posted October 23, 2022 Share Posted October 23, 2022 21 hours ago, Swede61 said: Perfect thank you - that did it with the underline. I then tried to get the active menu item to show a different color with the following code: .header-menu-nav-list .header-menu-nav-item--active { color: #fc0 !important; } But that didn't work 😒 With mobile, use this CSS div.header-menu-nav-item--active a { color: #f1f !important; } Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
Swede61 Posted October 23, 2022 Author Share Posted October 23, 2022 Thanks tuanphan, it's working now 😃 tuanphan 1 Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment