Template Help / Calipso - Two symbols not working correctly #plsHelp!

Design help General
1

I’m having 2 issues with the Calypso template, header nav on scroll not working for me and symbol footer not showing up on new pages ;(
)
I wish I could say, I’ll pay someone to help me, but this is a charity I’m helping out, so any help would ASAP would be super appreciated

Project share > Webflow - Help Heal Humanity

#1. Header-Navigation bar on scroll, [ it uses a transparent ]
Desired outcome - same as template page, on scroll, the header logo would change when from transparent .png that plays nicely with see thru header to a logo that sits on a white background [ reverse the logo sort of ]
i) How it should work
https://calipso-template.webflow.io/home/home-4
ii) How ours is looking
Here is my homepage, and as you can see the logo image doesn’t change ]

#2. Reveal footer [ bottom of page ]
i) How it should work
Calipso — Webflow HTML website template
I think this is using a z-index where the main body

wrapper is above the footer, but this does not want to work for me.
It sometimes even shows up mid page in between other :0

ii) How ours is looking
Here’s my page that is achieving this 100% perfectly, but on all other pages, no JOY, and I’ve mimiced where it sits in the Navigator

It’s there, I can see it in the Navigator, the above it has a z-index of 1
No idea what’s happening.
*NOTE, It’s working on our homepage, but whenever I try to drop it inside the Navigator, something is not working - see working version here > https://help-heal-humanity.webflow.io/

Can anyone help me on these two issues? I’m not a code guy, more so a visual designer UI/UX guy, so I may have screwed something up with the code, apologies if it’s a messy sphagetti nest ;(

@elasticthemes - please help me with this amazing theme of yours

thanks to anyone / everyone that takes the time to help us out #appreciatedGreatly

Here is my site Read-Only: [LINK][1]
https://preview.webflow.com/preview/help-heal-humanity?utm_medium=preview_link&utm_source=dashboard&utm_content=help-heal-humanity&preview=3d26d0ad71a9e9f68af7eb7deb4a5aa7&mode=preview

SNAGit-0074 9-22-2020
SNAGit-0074 9-22-20201920×937 135 KB
SNAGit-0075 9-22-2020
SNAGit-0075 9-22-20201920×937 298 KB
SNAGit-0079 9-22-2020
SNAGit-0079 9-22-20201920×937 101 KB
SNAGit-0077 9-22-2020
SNAGit-0077 9-22-20201920×937 303 KB

2

Hi Ryan,

Looks like you’ve created another version of the Nav Bar with different structure. That’s why the logo animation doesn’t work. But no worries, it’s very easy to fix.

You need to use the same class names for the logo images to make it work. I recorded a video for you: Loom | Free Screen & Video Recording Software | Loom Also you need to use the same size (proportions) for both of your logotypes to make them look good.

For the footer you just need to add a combo class (Footer v.2 Padding) to the Page Wrapper element and put the footer inside of it. Also make sure that all other sections have a background color and Z-index: 1 or more. Here is a video example for one of your existing pages: Loom | Free Screen & Video Recording Software | Loom

I hope it will be helpful.

Feel free to email us if you have more questions: support@elasticthemes.com

1 Like
3

Worked like a charm, well 98% - I must have broken the other 2%
https://help-heal-humanity.webflow.io/ourstory/our-why

I’m using the Footer v2 Padding class on the page wrapper, but for some reason the scrolling with the last two sections is finiky and not working like home page [ it should ]

One quick ask, I’m changing out the twitter logo in the footer to now be linkedIN, For the life of me, I can’t see how all the other logos are showing as a placeholder. I’ve created a .SVG version in white.
Q: Where can I now update the twitter.svg to be a LinkedIN one, I can’t seem to find any link to images? #soLostIam ;(

2020-09-24_9-58-52
2020-09-24_9-58-521888×734 211 KB
SNAGit-0033 9-24-2020
SNAGit-0033 9-24-2020516×666 109 KB

thanks for your help, really appreciate it Elastic themes team #muchLove @elasticthemes

4

another bug/issue I’m running into…

The footer seems to be bleeding thru existing inside the page, see this page
https://help-heal-humanity.webflow.io/ourimpact/our-impact
@elasticthemes

Screenshot attached

SNAGit-0042 9-24-2020
SNAGit-0042 9-24-20201702×905 365 KB

5

Hi Ryan,

As far as I see you’ve already replaced the twitter icon, so I guess the problem is solved :slight_smile:

The footer seems to be bleeding thru existing inside the page

As I mentioned above you need to make sure that all the sections you’ve added above the footer have the background color and Z-index: 1 or more. You can add the default “Section” class to your new sections and use combo classes like “No Padding Bottom” to adjust the style.

I recorded another video that should help you to solve the issues. Please watch: Loom | Free Screen & Video Recording Software | Loom

Sergey from Elastic Themes