Cart Off Canvas doesn't work on Sticky Bar

[omid020]

Hello,

I have a Cart Canvas element which should be appeared only with Sticky Bar; I defined .sticky-cart-icon class for this element and used this css to work:

.sticky-cart-icon {
  display: none;
}

.x-bar-fixed .sticky-cart-icon {
  display: block;
}

When I click on Cart Off Canvas icon on the sticky bar , the pane of added items does not open.

How can I correct it?

[christian]

Hey Omid,

This is because the class is applied to the off canvas panel as well so your CSS hides it also. You need to target the toggle only like this: .x-anchor-toggle.sticky-cart-icon.

If you’re using CSS, it’s strongly recommended that you learn how to use the browser’s element inspector to see the selectors you need to use.

Hope that helps.

[omid020]

Thank you @christian, it works nice; Indeed I am a bit confused; I had tried .x-anchor-toggle .sticky-cart-icon (with space between two classes) before but it was causing to appear Cart Icon even without Sticky Bar. There is different situation too: using .x-bar-fixed.sticky-cart-icon (without space between two classes) causes to hide icon on Sticky Bar! Why do they acts different?

Thank you in advance.

[friech]

Hi Omid,

In CSS selector having space between classes and not having space, is a big difference.

This .x-bar-fixed.sticky-cart-icon will target any element that both of these classes are present.

This .x-bar-fixed .sticky-cart-icon will target any element with a class sticky-cart-icon and a descendant of an element with a class x-bar-fixed.

More about CSS Combinators

Hope it helps,
Cheers!

[omid020]

Hi friech,

Very nice description.
Thank you so much!

[jade]

You’re most welcome, Omid.