Overlay on page when slidebar open

Need help
1

Hi,

So it seems hard to have a background colour on the top of all the elements of the page.

I will try Javascript for this but is there a solution within bubble to make this work?

Thanks!

Edit: It’s working in this forum tho… Built with bubble right?!

2

Why not try a floating group that is stretched out over the entire page and the background color set to how you want it. You have two options from here:

  1. Keep your menu inside another floating group, just make sure that you move it to the front so that it floats on top of the background above. Just add a conditional to the background floating group that it is visible when the side menu is visible.

  2. You place the menu inside a regular group and put it on the side of the floating group you added, just change the background color of the group to the color of the side menu and then show the background floating group to show it.

2 Likes
3

Thanks to answer!

It’s what I was thinking about. Just that after looking into Javascript it looked easy with this function:

function on() {
document.getElementById(“overlay”).style.display = “block”;
}

…

Sometime it’s simpler to just get some code than trying to turn around and pull something out with bubble.

4

Sometimes a little code goes a long way. :raised_hands:

Just FYI, this forum is not built on Bubble. They use: https://www.discourse.org

Did the code end up working for you?

5

Well not even sure if js is working on a free plan. I’ll be upgrading soon but still so much to work out with this app…

1 Like
6

Using the toolbox :toolbox: plugin should allow JavaScript without a paid plan. I don’t see why it wouldn’t.

7

OK I’ll test. I tried to run a darkmode function but not working so I thought must be on paid plan!

Edit: “custom headers are only applied for apps on paid plan”. I need to get the js from cdn.Jsdelivr.net… With a script in the header.

1 Like
8

This topic was automatically closed after 70 days. New replies are no longer allowed.