Richard06 Posted July 14, 2023 Share Posted July 14, 2023 Hello, I am trying to change the color of the burger icon for the mobile version of my Squarespace website. Can someone help me with this? The site url is: https://oceangrove.church The password to my website is: stpaulsstaff Link to comment
tuanphan Posted July 15, 2023 Share Posted July 15, 2023 For all pages or which page? 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
Richard06 Posted July 17, 2023 Author Share Posted July 17, 2023 for all pages! I want to change the burger icon the blue color for all the pages, so it matches the logo. And when the user clicks the burger icon, I want it to change to white every time. Link to comment
tuanphan Posted July 19, 2023 Share Posted July 19, 2023 Add this to Design > Custom CSS body:not(.header--menu-open) #header:is(.bright, .dark, .dark-bold, .black, .black-bold) .burger { background-color: var(--tertiaryButtonBackgroundColor) !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
Richard06 Posted July 19, 2023 Author Share Posted July 19, 2023 Is there a way to make the burger icon blue only when the logo is blue? Link to comment
tuanphan Posted July 22, 2023 Share Posted July 22, 2023 Code can target the following cases Burger menu is open or closed One page, some specific pages, all pages It cannot recognize when the logo is blue to do this. 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
Richard06 Posted July 22, 2023 Author Share Posted July 22, 2023 Okay, and how would I write the code to target a specific page? Link to comment
tuanphan Posted July 23, 2023 Share Posted July 23, 2023 Just add this code to that page Header <style> body:not(.header--menu-open) #header:is(.bright, .dark, .dark-bold, .black, .black-bold) .burger { background-color: var(--tertiaryButtonBackgroundColor) !important; } </style> 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
Richard06 Posted July 26, 2023 Author Share Posted July 26, 2023 Hey, so the code only works when I inject it on the header of the home page. Could you edit the code to make it so I can add it to any page to change the burger icon to blue? Link to comment
tuanphan Posted July 27, 2023 Share Posted July 27, 2023 18 hours ago, Richard06 said: Hey, so the code only works when I inject it on the header of the home page. Could you edit the code to make it so I can add it to any page to change the burger icon to blue? Use this. If it doesn't work, please share link to a page + keep code in page header, we can check easier <style> body:not(.header--menu-open) #header .header-burger .burger { background-color: var(--tertiaryButtonBackgroundColor) !important; } </style> 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
Create an account or sign in to comment
You need to be a member in order to leave a comment