Header color change on scroll

Need help
#1

Hello everyone !
I ran across an issue I cannot seem to resolve by myself. I want my header to be black at all times, and I did that by changing this condition and setting my header’s Dark? to yes.
image

It works well until I scroll, it then goes to white and I cannot seem to find the reason why. The support thinks it could be because of some custom code but I don’t know how to find it, if there is any.
The reason is that by adding “&bubble_safe_mode=true” to my admin page url, it does not happen anymore (but then the header is incomplete).

Do you have any idea how to help me ? Here’s a link to view my project: Cars-up | Bubble Editor

Thanks a lot

#2

@evodev
There should be a do when workflow on the page that fires to change the header’s state when the current scrolling position is >0. You’d have to tweak this workflow on the pages that have this color change effect when scrolling (typically marketing pages). Hope that helps!

#3

The thing is I cannot find such a workflow on the pages, so the issue seems to be coming from the Reusable Element header. When I use the debugger, no workflow is triggered when I scroll.
Still, thank you for your suggestion

#4

Hello @evodev

If the workflows is absent how about adding it to the pages it is needed on and with the tweaks you may need to implement? :smiley:

image
image1276×666 30.3 KB

#5

Hello !
I tried to do that earlier today and it didn’t work, I proceeded to record it for you to see the behavior. (This happens wether I make the WF work once or every time the condition is true)
Since the change doesn’t seem to come from any WF, I feel like the “HTML header” in the reusable element contains a conditon as “formatted as text” that would change the color of the header depending on the value of the scroll.
But I cannot seem to find such a condition !

#6

Hello @evodev

Just got an explanation for how to solve this from one of our awesome colleagues Eli! :smiley:

Two changes are needed:

  • One on the CSS of the header reusable
  • The second one on EACH floating group on EACH page that holds the header reusable

First change:

  • Make the header transparent when scrolling beyond scroll position 0
  • Find an element called HEADER CSS and do the following change within the formating as text expression

image
image1325×767 100 KB

Second change

Final product for the header:

image
image1604×889 100 KB

Sorry for the blurry images :sweat_smile:

Hope this helps! :smiley:

1 Like
How to personalize buttons and links in header
#7

Thanks a lot for that !
I tried it on one page and it does work, so I’ll just update all the pages.

Do you have any idea why we have to go through all of this to maintain the chosen color on the header?

#8

Hello @evodev

You are welcome :smiley:

Canvas is pretty much a pre-programmed Bubble app with lots of internal and external resources. Oftentimes not everything is directly connected or fully developed. I could not tell you on this specific case what the case is but do count on the great folks in the Canvas team to continually enhance the framework and make things as easy to deal with as possible. :+1:t2:

1 Like