Jump to content

Recreating the behavior of "Dynamic" headers, but for the footer?

Go to solution Solved by playfulphoenix,

Recommended Posts

Note: As the website is under construction, it is password protected

Hoping this is as simple as 'I missed a configuration option in the WYSIWYG editor', but if so, I haven't been able to find it 🙂

For a website I'm building, I'm wanting the footer to behave much like "Dynamic" headers do by default - I want them to inherit the foreground text color and the background of the final page section preceding them, and thereby have an 'integrated look' that does not look like a discrete footer. The footer for this website is about as minimalist as it gets - a copyright line pinned to the left corner, and a link list pinned to the right. So I am convinced that, for this website, it is the right approach to take aesthetically.

The challenge for me has been replicating this behavior consistently across the website. The last section of a particular page may use a different color theme than other pages, and on a few pages I leverage an animated art background. As aforementioned, the behavior I want for the footer is to simply behave as an extension of the preceding section from a style perspective - that is, match the text color, and extend the background of it. Therefore, I have had to customize the CSS for the footer background and text for each page, to ensure it matches the prior section.

For pages with sections that have static color backgrounds, it's easy enough to add CSS that is scoped to that page, and adjusts the footer foreground and background color to match. This looks great! The challenge is when I use an animated art background in the last section. If I simply color match the primary color of the art, it doesn't look great because the boundary between the section and footer is glaring and obvious,

After some experimentation, I just haven't been able to come up with a way to do this. I've tried absolute positioning of the footer and over-extending the prior section, but I can't get this to do anything but have the footer expose the page color beneath. I've also  replicated the art background of the prior section for the footer itself, but this enacts a performance penalty on client devices, and still doesn't look convincing as the animations are separate and therefore still retain an ugly boundary line between them.

Is there any way to accomplish what I am describing with CSS (or native functionality)?

Edited by playfulphoenix
Link to comment
  • Solution
On 9/14/2023 at 1:16 AM, tuanphan said:


I see you figured it out? Can you share solution for future users?

I ended up 'solving' this by picking a static gradient art background for pre-footer sections, such that solid footer colors blend into them uniformly. So not really a solution so much as avoiding the problem, but it accomplishes what I was trying to do.

Link to comment

Create an account or sign in to comment

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

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