Jump to content

Version 7.1 - Changing Fixed Header Background Color Only When Scrolling

Recommended Posts

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
  • Replies 26
  • Views 8.3k
  • Created
  • Last Reply
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
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
  • 2 weeks later...

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

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
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
  • 6 months later...

@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
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
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

@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
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

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
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;
}

image.png.2bc24d931df264cb90e5a2bfd0552ea1.png

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

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
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
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

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

Archived

This topic is now archived and is closed to further replies.


×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.