Docs

[jessica]

Hi! My woocommerce cart isn’t showing on mobile. I did disable the mobile menu on mobile, which likely has something to do with it, but I’d like the cart to show on all screen sizes.

[jessica]

This reply has been marked as private.

[Jade]

Hi Jessica,

Please add this code in the customizer:

.x-nav-wrap.desktop {
    display: block !important;
}

Hope this helps.

[jessica]

The cart still seems to appear and reappear depending on screen width. It also jumps around a bit from top to bottom. Please help.

It seems to be this code interfering:

@media (max-width: 899px) {
    .lb-text {
      display:none;}
}

Please advise.

[Rupok]

Hi there,

Let’s add this CSS as well :

@media only screen and (min-width: 483px) and (max-width: 899px) {
.x-navbar .desktop .x-nav > li.x-menu-item-woocommerce > a.x-btn-navbar-woocommerce {
  padding-top: 120px;
}
}

Hope this will do the job.

Cheers!

[jessica]

It’s almost resolved, it still jumps a bit. Try resizing and let me know if we can fix that jump. Thanks!

[Rue Nel]

Hello There,

Thanks for updating in! Please update the code and make use of this:

@media only screen and (min-width: 483px) and (max-width: 899px) {
  .x-navbar .desktop .x-nav > li.x-menu-item-woocommerce > a.x-btn-navbar-woocommerce {
    padding-top: 120px;
  }
}

@media only screen and (min-width: 890px) and (max-width: 1040px) {
  .x-navbar .desktop .x-nav > li.x-menu-item-woocommerce > a.x-btn-navbar-woocommerce {
    padding-top: 0;
    margin-top: -60px;
  }
}

@media only screen and (max-width: 480px) {
  .x-navbar .desktop .x-nav > li.x-menu-item-woocommerce > a.x-btn-navbar-woocommerce {
    margin-top: -60px;
  }
}

Hope this helps.

[jessica]

This helped. This code seems to be working, I made some revisions. The cart disappears at around 891 pixels and I’m not sure why. Please advise.

@media only screen and (min-width: 481px) and (max-width: 889px) {
  .x-navbar .desktop .x-nav > li.x-menu-item-woocommerce > a.x-btn-navbar-woocommerce {
    padding-top:160px;
  }
}

@media only screen and (min-width: 890px) and (max-width: 1040px) {
  .x-navbar .desktop .x-nav > li.x-menu-item-woocommerce > a.x-btn-navbar-woocommerce {
    padding-top: 0;
    margin-top: 0px;
  }
}

@media only screen and (max-width: 480px) {
  .x-navbar .desktop .x-nav > li.x-menu-item-woocommerce > a.x-btn-navbar-woocommerce {
    margin-top: -15px;
  }
}

[Rupok]

Hi there,

I have just went ahead and fixed the code so that it show on all screen size. Kindly don’t change that as it will get more confusing. I believe it’s good to go now.

Cheers!

[jessica]

Thank you

[Rue Nel]

You are most welcome!

[Author]

Posts