Cart shows only when I scroll down

[Peter789]

Hi there,

How can I make the “cart canvas” display when I scroll down? Or to be more precise when the “Second header” is active?

Since I have in the main header already a cart canvas element: https://prnt.sc/221ul42

Hopefully you understand what I mean

[tristup]

Hi Katarina,

There could be two different ways to acheive what you are expecting. When the bar got stuck, the class of x-bar-fixed is being added to it. So you can add the following custom CSS code into the specific Bar to show the Cart only if the class x-bar-fixed is added into it.

#add-to-cart-open-anchor-toggle
{
    display:none;
}

.x-bar-fixed #add-to-cart-open-anchor-toggle
{
    display:block !important;
}

Please remember that the above code will work if copied as it is and doesn’t conflict with any existing style.
Please note that the code provided serves only as a guide to help you get started custom coding on your own if there’s no option offered in our theme or the products we bundle.
We really do not provide support for custom codes that means we can’t fix it in case it conflicts with something on your site nor will we enhance it.

Another way is you can add two different Bar and add Cart elements into the initially hidden Bar. To create a similar setup, I would suggest you go through the following thread.

Header nav bar to remain transparent while static, but be solid white while scrolling

Hi Nalwi, Thanks for reaching out. I went ahead and have done the following steps to achieve exactly what you want and assigned it to the Entire Site. Step 1: Set the Initial Position as Absolute and disabled the Sticky option of the Bar. [DCE-Header-Headers-Pro] Step 2: Set that background color transparent. Step 3: Set the white Color to menu items Step 4: Duplicated the First Bar. Step 5. Enable the Sticky Option* and checked the option Hide Initially. Step 6. Set the background col…

Header builder change background on scroll

Hello I am using header builder and. using sticky header, I need to change the background of the header on scroll only. Just wondering if there is any option on how to do that other than custom css.

Sticky bar first transparent

Hi there Is it possible to have the sticky bar first transparent and with the first scroll get a background color? Thanks Andreas

Hope it helps.
Thanks

[Peter789]

Thanks Tristup for the code!

You are the legend!

I appreciate your help <3

Kind regards,
Kate

[tristup]

Hi Katarina,

Glad that we are able to help you.

Thanks