WIP: Menu Item breaks in two lines; slider in Popup breaks whole site

Hi folks,

I’ve two problems and I can’t figure out why that is:

  1. One menu item breaks into two lines but it doesn’t have to.
  2. The last section of the homepage is a slider. When you click on the image a popup with another slider opens. I’ve realized this with MetaSlider. I tried with the Bricks native slider and the one from Frames. But both break the site: the popup doesn’t open anymore and the css transition of the images breaks. Would be great to use the bricks slider for styling and a query loop in the popup though.

Ideas are much appreciated :slight_smile:

Thanks a lot!

Hi Christian,
Welcome to the forum!

In order to be able to help you in any way, we need a live link and concrete details (screenshots of the setup, metabox fields, etc.).

Can you provide us with everything necessary so that we can a) see the problems and b) reproduce them if necessary?

Best regards,
timmse

Hi timmse,

thanks a lot!

I tried to edit the post when I noticed that the link was missing but that might have gone wrong…

You can find the page under https://wordpress-1346585-5058132.cloudwaysapps.com/

The template of the popup in itself worked, it just breaks when put into action on the homepage. On the other hand it works when I use MetaSlider instead of the native ones.

I’m not sure which settings to screenshot.

  1. Is the menu issue already fixed? I can’t see any issue :thinking:

  2. Slider: Please send temporary login credentials and a link to this thread to help@bricksbuilder.io using the email address you used during the purchase. Then we’ll be happy to take a closer look.

All good - we confirm the first post of a user manually, and as a newbie you don’t have all rights yet.

Yes, the first is fixed. It was gone after deactivating Automatic CSS. After figuring that out, I just placed white-space: nowrap; in the div.

  1. It’s most-likely the max-inline-size on the li tag, added by ACSS.
  2. Have you already sent access data? Unfortunately, I can’t find an e-mail from you…

Hey timmse,

no, I haven’t send anything. Which email should I use for your user?

You probably missed it: WAIT: Menu Item breaks in two lines; slider in Popup breaks whole site - #4 by timmse

Yeah, I really missed it… You’ve got a mail. Thanks a lot!

Hi Christian,
Thanks so much for the login data!

We have found the cause of the problem. It seems to be the “disable backdrop” setting. As soon as I deactivate it, the nestable slider within the popup works as it should. Can you confirm this?

I have created an internal task for this.

Hi timmse,

thank you very much! Yes, I have played around with on the homepage and everything seems to work as it should.

It’s just that the “per page” setting doesn’t work anymore on mobile screens.

It does work,
but it includes the padding-right, which I added while testing. I just removed it.

CleanShot 2024-11-29 at 13.22.31@2x

Ah ok, the padding how I set it up was part of the design. So when per page was set to two you should see a fraction of the third slide. The aspect ratio is different now too. Played around but not sure how to get the look back how it was.

Edit: Now the size of the image is like it should, but the gap is too big because the width of the slide. Would be great if you can make the settings like they were before.

Is it likely that I can use the native slider at some point without the backdrop or do I have to work with Metaslider for this purpose?

Sorry, but I can’t remember exactly what was set two days ago - however, as far as I remember, I didn’t change anything in the variable values that determine the image size in your case:

CleanShot 2024-11-29 at 16.18.05@2x

--image-height: clamp(25rem, 10.329vw + 21.127rem, 36rem);
--image-width: clamp(33.5rem, 22.441vw + 25.085rem, 57.4rem);

It’s a landscape rather than a portrait format (which it was before, right?).
I only reset some of the slider settings since you’re using custom slider options, which can lead to unexpected results in certain cases. Use either one or the other.

You can check within the 96 revisions to see if you can get back to the original layout. Sorry for the circumstances :v:

We’ll update this thread as soon as the issue is fixed. However, it doesn’t make any difference for that specific popup since its width is 100%, and you won’t see the backdrop (at least you shouldn’t).

Thanks a lot! :slight_smile: I think I’ve figured it out now.

The only time you can see the backdrop is after sliding out. But it would be totally ok, if there is a possibility to set the backdrop fully transparent. Do you know some css for that?

Thanks again, great support :smiley:

The easiest way is to set the transparency to 0 – then, it shouldn’t be visible at all.

Thanks a lot! :smiley: That’s totally fine for now!