Strange button jump

Hey there,

On my site, I have a ‘Shop’ button on the top right corner of the Navbar. When an item is added to the shop, the ‘cart’ button appears—in the shape a small circle with a number—to right of the ‘Shop’ button. When the cart is empty, that ‘cart’ button is not visible.

When switching between pages on the site when the cart is empty, the ‘Shop’ button makes a funny jump to the left, and then goes back to its place, as if it makes way to an invisible cart button each time a new page loads.

In this Read-Only link it’s not visible, because by default the shopping cart is filled with three items, but you have to imagine (or look at the screenshots below) that this occurs when the shopping cart is empty, and the green circle with the 3 in it isn’t there.

docodo_button_jump

Any ideas on how to avoid this jump?

Thank you!


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

Hi Kobi,

I couldn’t replicate the issue from within the editor as it seems to be a load order issue.

However, it seems to me that it could be caused by the ‘cart quantity’ element being loaded in.

I would try to either:

  1. Set the cart button to absolute and space it to account for the quantity element

  2. Add the quantity to the left of the cart so that it doesn’t affect the cart button when loading in.

  3. Add a columns element to div block 26 and put each element into its own column.

It really depends on your requirements, I would personally opt for the columns option as it allows you to retain the same layout and is a simple option.

Hope that helps

Thanks, @Tomhirst - those are great suggestions, although 2 and 3 compromise the design of the page, as I would like to keep the ‘Shop’ button all the way to the right, and have it pushed to the left only when the cart appears and takes its spot. I tried option 1 with setting the ‘Shop’ button to absolute and spacing it so that it sits right where it should, but when the cart (quantity element) appears it shows up on top of it, because the ‘Shop’ button doesn’t move aside. Maybe I’m doing something wrong there?

If nothing else works, I might just go for your suggestion 2, although I wish I could find another solution.

btw - the reason you couldn’t replicate it is because the read only site has a demo cart in it, with 3 items already in, which cannot be removed. But you could see it here.

Thanks again!
Kobi

As I couldn’t find any other solution, I used your advise @Tomhirst and switched between the two buttons. Not ideal, but at least I don’t have that jump anymore.

Thanks!
Kobi

Hi @kobi

It is a shame to change the layout I agree, but at least this gets rid of the odd FOUC like issue for now.

I did notice that you may be able to swap out the default method for hiding the quantity element that Webflow uses when you select the ‘Hide when cart is empty’ option under the cart quantity settings.

If we use visibility: hidden; Instead of the default display: none; the element will not negatively impact the layout when not visible.

For example:

.w-condition-invisible {
display: inline-block;
visibility: hidden;

The full selector is: w-commerce-commercecartopenlinkcount cart-quantity-2 w-condition-invisible

Now I’m sure Webflow have a valid reason for using display: none and not visibility and I haven’t tested this thoroughly as I don’t have an ecom build to test it on so please test it well if you do take this route but it seems to be working ok on the link you sent.

Hi @Tomhirst

Thanks so much for this solution. It’s a bit beyond my skills set, but I will try to figure out how to do it.

Thanks again for all your help, and all the best,
Kobi

1 Like

Hi Kobi,

Sorry for the late reply.

That’s understandable you should be able to put the CSS below into your custom code section and it should work. But I haven’t tested it as I was using your site link if you paste this into your custom code section and publish and just test it on the live staging site on multiple devices/browsers you should be good to go if you don’t come across any issues.

If you do come across any issues feel free to pass them on and I’ll see what I can do.

<style>
.w-condition-invisible {
display: inline-block;
visibility: hidden;}
</style>