Streaming live at 10am (PST)

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

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 >

#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

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

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]

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

I hope it will be helpful.

Feel free to email us if you have more questions:

1 Like

Worked like a charm, well 98% - I must have broken the other 2%

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

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

another bug/issue I’m running into…

The footer seems to be bleeding thru existing inside the page, see this page


Screenshot attached

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:

Sergey from Elastic Themes