Guest Posted June 11, 2020 Share Posted June 11, 2020 Site URL: http://www.thesunflowerfarm.ca Hello, I'm trying to change the background color of the fixed header to white only when scrolling. Would like to keep it set to transparent but when I scroll it turns black and text is black instead of white. Would like to keep text black but change scrolling background to white. Using Version 7.1 - is this hidden somewhere in Design - Colors or custom CSS? Please help! Thanks! Link to comment
Beyondspace Posted June 15, 2020 Share Posted June 15, 2020 On 6/11/2020 at 10:26 PM, Ursula4 said: Site URL: http://www.thesunflowerfarm.ca Hello, I'm trying to change the background color of the fixed header to white only when scrolling. Would like to keep it set to transparent but when I scroll it turns black and text is black instead of white. Would like to keep text black but change scrolling background to white. Using Version 7.1 - is this hidden somewhere in Design - Colors or custom CSS? Please help! Thanks! Your site is protected BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox - Lightbox captions only mode) 🗓️ Delivery Date Picker (Squarespace Date picker form field) 💫 Gallery block 7.1 workaround 🥳 No-code customisations for Squarespace 🚀 Learn how to rank new pages on Google in 48 hours! 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
Just-Adam Posted June 19, 2020 Share Posted June 19, 2020 Following this post with the same query! Link to comment
Beyondspace Posted June 19, 2020 Share Posted June 19, 2020 59 minutes ago, Just-Adam said: Following this post with the same query! What is your site url BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox - Lightbox captions only mode) 🗓️ Delivery Date Picker (Squarespace Date picker form field) 💫 Gallery block 7.1 workaround 🥳 No-code customisations for Squarespace 🚀 Learn how to rank new pages on Google in 48 hours! 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
Guest Posted June 28, 2020 Share Posted June 28, 2020 Hello, i had the same issue but i found the solution on another post. Here is the code i found and used: Add to Home > Settings > Advanced > Code Injection > Header <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script> <script> var a=['\x68\x65\x61\x64\x65\x72\x23\x68\x65\x61','\x73\x63\x72\x6f\x6c\x6c','\x64\x65\x72','\x72\x65\x6d\x6f\x76\x65\x43\x6c\x61\x73','\x70\x61\x67\x65\x59\x4f\x66\x66\x73\x65','\x74\x75\x61\x6e','\x64\x6f\x63\x75\x6d\x65\x6e\x74\x45\x6c'];(function(b,e){var f=function(g){while(--g){b['push'](b['shift']());}};f(++e);}(a,0x150));var b=function(c,d){c=c-0x0;var e=a[c];return e;};$(function(){var c=0xa;$(window)[b('\x30\x78\x31')](function(){var e=d();if(e>=c){$(b('\x30\x78\x30')+b('\x30\x78\x32'))['\x61\x64\x64\x43\x6c\x61\x73\x73']('\x74\x75\x61\x6e');}else{$(b('\x30\x78\x30')+b('\x30\x78\x32'))[b('\x30\x78\x33')+'\x73'](b('\x30\x78\x35'));}});function d(){return window[b('\x30\x78\x34')+'\x74']||document[b('\x30\x78\x36')+'\x65\x6d\x65\x6e\x74']['\x73\x63\x72\x6f\x6c\x6c\x54\x6f\x70'];}}); </script> <style> .tuan { position: fixed; background: white !important; top: 0; left: 0; width: 100%; z-index: 999 !important; } </style> Link to comment
dkcavaliere Posted July 2, 2020 Share Posted July 2, 2020 I have been looking for a solution for this for several days. The problem I was having is that I needed the logo and page links in my header to be white with a transparent background at the top of my pages (before scroll), because the photos I have at the top of every page are dark and no other color shows up. I wanted the nav bar to be a white background and gray/black links after the user scrolls past the photo. I didn't see a way to do this currently in the UI. I also wanted to do this using only CSS if possible. @tuanphan Helped me with this and I was able to get exactly what I wanted! I will include the code below. I hope this helps some of you in the future. Note: I set the header to be transparent and fixed before adding this code. Add to Home > Design > Custom CSS /*Colors*/ @lightgray: #808285; @aqua: #46ACB9; /*Header links color*/ .header-announcement-bar-wrapper.black.shrink * { color: @lightgray !important; fill: @lightgray !important; } /*Logo color*/ .header-announcement-bar-wrapper.black.shrink a#site-title { color: @aqua !important; } /*Hamburger menu color*/ .header-announcement-bar-wrapper.black.shrink { .burger-inner::before, .burger-inner::after { background: @lightgray !important; } } Link to comment
Guest Posted July 7, 2020 Share Posted July 7, 2020 Hi @dkcavaliereand @tuanphan is there a way to do this exact thing in version 7.0 please? The code above doesn't seem to work for me (and I'm on a Personal plan so cannot use Javascript to achieve this). Thank you! Link to comment
tuanphan Posted July 7, 2020 Share Posted July 7, 2020 52 minutes ago, NaomiHt said: Hi @dkcavaliereand @tuanphan is there a way to do this exact thing in version 7.0 please? The code above doesn't seem to work for me (and I'm on a Personal plan so cannot use Javascript to achieve this). Thank you! Depending your template. Can you share link to your site? 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
tbracher Posted January 8, 2021 Share Posted January 8, 2021 @tuanphan https://saxophone-strawberry-bx4g.squarespace.com/ pass: tbs i am hoping you can help! I have the header with the above code (transparent and not white): <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script> <script> var a=['\x68\x65\x61\x64\x65\x72\x23\x68\x65\x61','\x73\x63\x72\x6f\x6c\x6c','\x64\x65\x72','\x72\x65\x6d\x6f\x76\x65\x43\x6c\x61\x73','\x70\x61\x67\x65\x59\x4f\x66\x66\x73\x65','\x74\x75\x61\x6e','\x64\x6f\x63\x75\x6d\x65\x6e\x74\x45\x6c'];(function(b,e){var f=function(g){while(--g){b['push'](b['shift']());}};f(++e);}(a,0x150));var b=function(c,d){c=c-0x0;var e=a[c];return e;};$(function(){var c=0xa;$(window)[b('\x30\x78\x31')](function(){var e=d();if(e>=c){$(b('\x30\x78\x30')+b('\x30\x78\x32'))['\x61\x64\x64\x43\x6c\x61\x73\x73']('\x74\x75\x61\x6e');}else{$(b('\x30\x78\x30')+b('\x30\x78\x32'))[b('\x30\x78\x33')+'\x73'](b('\x30\x78\x35'));}});function d(){return window[b('\x30\x78\x34')+'\x74']||document[b('\x30\x78\x36')+'\x65\x6d\x65\x6e\x74']['\x73\x63\x72\x6f\x6c\x6c\x54\x6f\x70'];}}); </script> <style> .tuan { position: fixed; background: transparent !important; top: 0; left: 0; width: 100%; z-index: 999 !important; } </style> However I lose (when I scroll into the page where the backgrund changes frvom 'black to white'.... two things: 1) I want to use the mobile nav for the whole site, and this code was working until this new code was inserted: @media screen and (min-width:950px) {.header-nav, .header-actions { display: none!important} .header-burger { display: flex!important;} .header--menu-open .header-menu {opacity: 1; visibility: visible;}} 2) the nav + (in the current case, the links) are white and not responding to what th background is to be legible. GOAL: I want to have the '+' as the nav I want to not have a background to the header I want to have the logo and the + of the nav be visible be it on top of a black section background or white, or light grey etc. Thank you kindly! Link to comment
tuanphan Posted January 10, 2021 Share Posted January 10, 2021 On 1/8/2021 at 6:24 PM, tbracher said: @tuanphan https://saxophone-strawberry-bx4g.squarespace.com/ pass: TBS i am hoping you can help! I have the header with the above code (transparent and not white): <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script> <script> var a=['\x68\x65\x61\x64\x65\x72\x23\x68\x65\x61','\x73\x63\x72\x6f\x6c\x6c','\x64\x65\x72','\x72\x65\x6d\x6f\x76\x65\x43\x6c\x61\x73','\x70\x61\x67\x65\x59\x4f\x66\x66\x73\x65','\x74\x75\x61\x6e','\x64\x6f\x63\x75\x6d\x65\x6e\x74\x45\x6c'];(function(b,e){var f=function(g){while(--g){b['push'](b['shift']());}};f(++e);}(a,0x150));var b=function(c,d){c=c-0x0;var e=a[c];return e;};$(function(){var c=0xa;$(window)[b('\x30\x78\x31')](function(){var e=d();if(e>=c){$(b('\x30\x78\x30')+b('\x30\x78\x32'))['\x61\x64\x64\x43\x6c\x61\x73\x73']('\x74\x75\x61\x6e');}else{$(b('\x30\x78\x30')+b('\x30\x78\x32'))[b('\x30\x78\x33')+'\x73'](b('\x30\x78\x35'));}});function d(){return window[b('\x30\x78\x34')+'\x74']||document[b('\x30\x78\x36')+'\x65\x6d\x65\x6e\x74']['\x73\x63\x72\x6f\x6c\x6c\x54\x6f\x70'];}}); </script> <style> .tuan { position: fixed; background: transparent !important; top: 0; left: 0; width: 100%; z-index: 999 !important; } </style> However I lose (when I scroll into the page where the backgrund changes frvom 'black to white'.... two things: 1) I want to use the mobile nav for the whole site, and this code was working until this new code was inserted: @media screen and (min-width:950px) {.header-nav, .header-actions { display: none!important} .header-burger { display: flex!important;} .header--menu-open .header-menu {opacity: 1; visibility: visible;}} 2) the nav + (in the current case, the links) are white and not responding to what th background is to be legible. GOAL: I want to have the '+' as the nav I want to not have a background to the header I want to have the logo and the + of the nav be visible be it on top of a black section background or white, or light grey etc. Thank you kindly! TBS is incorrect password 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
tbracher Posted January 11, 2021 Share Posted January 11, 2021 I've made some edits since my post @tuanphan So one new question is how on mobile can I click on the + and go right INTO the menu.. not to 'Menu first' and then into the items... do you know what I mean? Link to comment
tuanphan Posted January 13, 2021 Share Posted January 13, 2021 On 1/11/2021 at 9:54 PM, tbracher said: I've made some edits since my post @tuanphan So one new question is how on mobile can I click on the + and go right INTO the menu.. not to 'Menu first' and then into the items... do you know what I mean? You mean show all what we do items under what we do, without clicking arrow icon? 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
tbracher Posted January 13, 2021 Share Posted January 13, 2021 @tuanphanno, meaning right now I have a folder of pages, and that folder is called MENU.. and that folder is int he linked section thererfore shows up as a Nav group of links as you know, and all is good. HOWEVER on mobile, when I click on the burger, i get MENU, and then I need to click again to get to the page titles... I would prefer when on mobile when I click on the burger I get the overlay with the list of pages right away. 🙂 THANK YOU for your support! Link to comment
tuanphan Posted January 17, 2021 Share Posted January 17, 2021 On 1/13/2021 at 6:54 PM, tbracher said: @tuanphanno, meaning right now I have a folder of pages, and that folder is called MENU.. and that folder is int he linked section thererfore shows up as a Nav group of links as you know, and all is good. HOWEVER on mobile, when I click on the burger, i get MENU, and then I need to click again to get to the page titles... I would prefer when on mobile when I click on the burger I get the overlay with the list of pages right away. 🙂 THANK YOU for your support! 2 options to do this O1. (Personal Plan or higher). You can add all items on Navigation, then we will give code to show some items on desktop, show some items on mobile. O2. (Business Plan or higher). Add CSS & JavaScript to solve this. About 100 lines of code 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
tbracher Posted January 23, 2021 Share Posted January 23, 2021 @tuanphanprefer option 1... 100 lines of code sounds.. well, long. Link to comment
tuanphan Posted January 24, 2021 Share Posted January 24, 2021 On 1/23/2021 at 8:32 AM, tbracher said: @tuanphanprefer option 1... 100 lines of code sounds.. well, long. You can add items for desktop/mobile first, then we can check & give the code 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
artpimpress Posted January 26, 2021 Share Posted January 26, 2021 I am looking for a slightly different fix and hope someone can help. I am working with 7.1 and have a transparent header, we would like the logo and navigation fonts to be white but on scroll change the font color to black and replace the logo with one with black text. I am trying out other options on other pages but you can see what I am trying to do here on the contact page https://mgm-capital.squarespace.com/contact password: mgmcap Link to comment
Beyondspace Posted January 27, 2021 Share Posted January 27, 2021 2 hours ago, artpimpress said: I am looking for a slightly different fix and hope someone can help. I am working with 7.1 and have a transparent header, we would like the logo and navigation fonts to be white but on scroll change the font color to black and replace the logo with one with black text. I am trying out other options on other pages but you can see what I am trying to do here on the contact page https://mgm-capital.squarespace.com/contact password: mgmcap You can place this css in Design->Custom CSS, Could you share the logo url with black text body[data-menu-overlay-theme-switcher="true"]:not(.header--menu-open) .dark .header-nav-wrapper .header-nav-folder-item a { color: #000; } body[data-menu-overlay-theme-switcher="true"] .shrink.dark .header-nav-wrapper a { color: #000; } body[data-menu-overlay-theme-switcher="true"] .shrink.dark .header-nav-wrapper .header-nav-item--active a { color: #000; } BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox - Lightbox captions only mode) 🗓️ Delivery Date Picker (Squarespace Date picker form field) 💫 Gallery block 7.1 workaround 🥳 No-code customisations for Squarespace 🚀 Learn how to rank new pages on Google in 48 hours! 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
artpimpress Posted January 27, 2021 Share Posted January 27, 2021 That works perfectly for the font change. The logo with black text is attached. So grateful! Link to comment
artpimpress Posted January 27, 2021 Share Posted January 27, 2021 logo uploaded now to site https://static1.squarespace.com/static/600f3d35e94eaf43b5a8ce4d/t/60115cba5931584164509e68/1611750587408/MGM-Capital-Investments-logo.png Link to comment
artpimpress Posted January 27, 2021 Share Posted January 27, 2021 Sorry, now it's not working. When I have the design/custom css tab open it appears to be working but when I go back to pages it disappears. The goal is to have this affect on all pages so I changed the color theme on a few of the other pages to the same as the contact. Could that have broken the code? Link to comment
Beyondspace Posted January 28, 2021 Share Posted January 28, 2021 22 hours ago, artpimpress said: Sorry, now it's not working. When I have the design/custom css tab open it appears to be working but when I go back to pages it disappears. The goal is to have this affect on all pages so I changed the color theme on a few of the other pages to the same as the contact. Could that have broken the code? yeah the code work with .dark header, let me fix the issue, BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox - Lightbox captions only mode) 🗓️ Delivery Date Picker (Squarespace Date picker form field) 💫 Gallery block 7.1 workaround 🥳 No-code customisations for Squarespace 🚀 Learn how to rank new pages on Google in 48 hours! 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
Beyondspace Posted January 28, 2021 Share Posted January 28, 2021 body[data-menu-overlay-theme-switcher="true"]:not(.header--menu-open) .dark .header-nav-wrapper .header-nav-folder-item a { color: #000; } body[data-menu-overlay-theme-switcher="true"] .shrink.dark .header-nav-wrapper a { color: #000; } body[data-menu-overlay-theme-switcher="true"] .shrink.dark .header-nav-wrapper .header-nav-item--active a { color: #000; } body[data-menu-overlay-theme-switcher="true"] .shrink.dark .header-title-nav-wrapper .header-title-logo img { opacity: 0 } body[data-menu-overlay-theme-switcher="true"] .shrink.dark .header-title-nav-wrapper .header-title-logo a { background: url('https://static1.squarespace.com/static/600f3d35e94eaf43b5a8ce4d/t/60115cba5931584164509e68/1611750587408/MGM-Capital-Investments-logo.png'); background-size: cover; background-repeat: no-repeat; } BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox - Lightbox captions only mode) 🗓️ Delivery Date Picker (Squarespace Date picker form field) 💫 Gallery block 7.1 workaround 🥳 No-code customisations for Squarespace 🚀 Learn how to rank new pages on Google in 48 hours! 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
artpimpress Posted January 29, 2021 Share Posted January 29, 2021 I am so sorry but it's still not working. Is it because I had changed some of the colors in the dark minimal theme first? I had changed the background to white. I tried to put it back to black but that didn't work. It's also odd to me that it works perfectly when I have the css/panel open but when I go to the pages, it's lost. I've taken up so much of your time, no need to respond. I am grateful for your help. Link to comment
Recommended Posts
Archived
This topic is now archived and is closed to further replies.