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

Version 7.1 - Changing Fixed Header Background Color Only When Scrolling

Question

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!

Share this post


Link to post

7 answers to this question

Recommended Posts

  • 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


I am frontend dev that provide solutions to enhance feature of squarespace.com can't provide, please check my profile for more details

--- To Space And Beyond! ---

https://www.freelancer.com/u/BaNgan

Share this post


Link to post
  • 0
Posted (edited)

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

Share this post


Link to post
  • 0
Posted (edited)

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

Share this post


Link to post
  • 0

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!

Share this post


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?


You can send your question to my email to get faster answer.

How to Setup Password & Share URL  Armadillo - Free portfolio template

Share this post


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