Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 1

Version 7.1 - Changing Fixed Header Background Color Only When Scrolling


Guest

Question

Guest

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 post
  • Answers 26
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

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 o

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 t

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 tha

Posted Images

Recommended Posts

  • 1

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

 

Edited by dkcavaliere
Link to post
  • 0
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

Greeting, it's BaNgan from BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement, Enable Pinch/Zoom on lightbox, 360 degree photo blockSortable Table from GSheet
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to post
  • 0
59 minutes ago, Just-Adam said:

Following this post with the same query!

 

What is your site url

Greeting, it's BaNgan from BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement, Enable Pinch/Zoom on lightbox, 360 degree photo blockSortable Table from GSheet
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to post
  • 0

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>
Edited by Nodus
Link to post
  • 0
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?

Link to post
  • 0

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

 

Edited by tbracher
Link to post
  • 0
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

Link to post
  • 0
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?

Link to post
  • 0

@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 post
  • 0
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

Link to post
  • 0
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

Link to post
  • 0

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 post
  • 0
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

Greeting, it's BaNgan from BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement, Enable Pinch/Zoom on lightbox, 360 degree photo blockSortable Table from GSheet
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to post
  • 0

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 post
  • 0
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, 

Greeting, it's BaNgan from BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement, Enable Pinch/Zoom on lightbox, 360 degree photo blockSortable Table from GSheet
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to post
  • 0
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;
}

 

Greeting, it's BaNgan from BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement, Enable Pinch/Zoom on lightbox, 360 degree photo blockSortable Table from GSheet
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to post
  • 0

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 post
  • 0
2 hours ago, artpimpress said:

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.

Let me try override them with important

body[data-menu-overlay-theme-switcher="true"]:not(.header--menu-open) .dark .header-nav-wrapper .header-nav-folder-item a {
    color: #000 !important;
}
body[data-menu-overlay-theme-switcher="true"]:not(.header--menu-open) .shrink.dark .header-nav-wrapper a {
    color: #000 !important;
}
body[data-menu-overlay-theme-switcher="true"] .shrink.dark .header-nav-wrapper .header-nav-item--active a {
  color: #000 !important;
}
body[data-menu-overlay-theme-switcher="true"] .shrink.dark .header-title-nav-wrapper .header-title-logo img {
  opacity: 0  !important;
}
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;
}

 

Edited by bangank36

Greeting, it's BaNgan from BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement, Enable Pinch/Zoom on lightbox, 360 degree photo blockSortable Table from GSheet
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...