Standard Nav clashes with Cartloom

Elements
1

The Standard Navigation clashes with Cartloom in as much as when you load the Cartloom script (no matter how or at what time), the Standard nav reveals the mobile nav toggle at all screen sizes.

<script src="https://doobox.cartloom.com/v5/cart.js"></script>

Very difficult to debug without having access to the Standard Nav code to do any trail and error. No console errors.

Nothing else but Standard Nav in the page with the script loaded:

CleanShot 2025-04-05 at 12 .48.51@2x
CleanShot 2025-04-05 at 12 .48.51@2x2388×454 5.15 KB

2

Traced the issue to a css file cartloom script loads : loader.css

loader.css contains :

.flex {
  display: flex;
}

Un-scoped, that overrides the standard navigations mobile nav toggle class :

class="flex lg:hidden"

There is no proper workaround. carloom.js loads the loader.css late, after doc ready, and after a timeout, so no matter where you place it, it will always override anything that is defined in the loader.css.

I can hack around that one issue its causing for me in the nav at the moment with extra css matching the nav toggle media query:

@media (min-width: 1024px) {
  .lg\:hidden.flex {
    display: none !important;
  }
}

But, hmmmmm, yeah, not great…

@yabdab

3

I can confirm that I’m also seeing this problem on my sites where I’m using Cartloom scripts.

Hope we can get this fixed as I’m ready to publish one of my sites.

4

Can only be fixed on Cartlooms end. I have let Mike (Cartloom) know.

1 Like
5

Mike has been on the ball and address this issue. Cartloom without issue now inside Elements. :+1: @yabdab

5 Likes
6

Fantastic news, they are very responsive, so refreshing, glad I’m making the switch back to Cartloom.

UPDATE: I can confirm it is fixed on my end as well, great!

1 Like