Tagged: , , ,

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • August 25, 2020 at 7:46 pm #1240750
    Morticka

    Hi guys,

    You previously gave me code to move the woocommerce cart to the left of the hamburger menu in this thread: https://kriesi.at/support/topic/moving-woocommerce-cart-next-to-logo-on-mobile-view/.

    Now it does not work anymore.

    This is the code so far:

    /* Move woo cart to the left of burgermenu on mobile */
@media only screen  and (min-width: 480px) and (max-width: 767px) {
  .html_visible_cart .av-burger-menu-main {
    padding-right: 45;
}
  
    .html_visible_cart .cart_dropdown {
      right: 100px;
  }

}
@media only screen and (max-width: 479px) {
  .html_visible_cart .cart_dropdown {
      right: 70px;
  }
  .html_visible_cart .av-burger-menu-main {
    padding-right: 0;
  }
}

    Ismael gave me the following code, but this moves the cart on the desktop to the left as well:

    .responsive #top .cart_dropdown {
	right: 240px;
}

    Somewhere something goes wrong and I don’t know where it all goes wrong.

    Do you have a solution?

    Thx in advance.

    Sincerely,
    Morticka

    August 31, 2020 at 4:11 am #1242043
    Mike

    Hey Morticka,
    Sorry for the late reply and thanks for the login, I checked your child theme stylesheet css rules for this and found missing brackets between your rules so they were not working correctly, and I noticed that at 320px-375px your logo is too big to allow the cart icon so I corrected by commenting out some of your css rules and rebuilding in the Quick CSS, this way you can review and adjust to suit and eventually migrate to your child theme.
    This is what I added:

    @media only screen and (min-width: 319px) and (max-width: 417px) {
.responsive #header_main .logo img {
    max-width: 60% !important;
  }
}
@media only screen  and (min-width: 480px) and (max-width: 988px) {
  .html_visible_cart .av-burger-menu-main {
    padding-right: 0;
  }
  .html_visible_cart ul.cart_dropdown {
      right: 100px;
  }
.responsive #top .av-main-nav .menu-item-avia-special {
    display: block;
}
  .responsive .logo img {
    max-width: 80% !important;
  }
}
@media only screen and (max-width: 479px) {
  .html_visible_cart ul.cart_dropdown {
      right: 120px !important;
      z-index: 5 !important;
  }
  .html_visible_cart .av-burger-menu-main {
    padding-right: 0;
  }
}

    Please clear your browser cache and check.

    Best regards,
    Mike

    August 31, 2020 at 3:02 pm #1242200
    Morticka

    Hi Mike,

    Thank you very much! :D

    I did notice that the search icon is displayed next to the hamburger menu now. Before, the search icon was displayed inside the hamburger menu.

    How can I put the search icon back in the hamburger menu?

    <EDIT> In landscape mode on mobile the cart is on top of the search icon as well.

    Sincerely,
    Morticka

    September 2, 2020 at 1:25 pm #1242797
    Mike

    Hi,
    Sorry for the late reply, I adjusted for the search icon on mobile up to 988px, please clear your browser cache and check.

    Best regards,
    Mike

    September 3, 2020 at 3:30 pm #1243127
    Morticka

    Hi Mike,

    Thx, that looks good again!

    I’m just having trouble moving the cart to the left again, because now that the search icon is gone, the cart moved again.

    How can I move the cart more to the left?

    Sincerely,
    Morticka

    September 4, 2020 at 1:35 pm #1243322
    Mike

    Hi,
    The css that is moving the cart is like this:

    .html_visible_cart ul.cart_dropdown {
      right: 120px !important;
}

    but I’m not sure at which screen resolution you are having trouble width, Please see the screenshots in Private Content area of mobile and tablet.
    Please try adjusting this to suit, if you still have trouble please let us know which screen resolution and try adding a screenshot.
    How far does it need to move 10px?

    Best regards,
    Mike

    September 4, 2020 at 11:35 pm #1243458
    Morticka

    Great, found it!

    I could not touch the cart icon on iphone in portrait mode (hamburger menu kept opening) and in landscape mode the cart was overlapping the hamburger menu.

    Now it looks good, thank you very much Mike :D

    You can close this ticket.

    Sincerely,
    Morticka

    September 5, 2020 at 1:00 am #1243490
    Jordan Shannon

    Hi,

    If you need additional help, please let us know here in the forums.

    Best regards,
    Jordan Shannon

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)
  • The topic ‘Move Woocommerce cart left of the hamburger menu (again) and bigger cart icon’ is closed to new replies.