How to align add to cart icon - mobile version mavon theme

Shopify Discussion
1

Hello there !!

Is there a way to align the add to cart and wish list icon as the same height as logo . Any changes I make affects the desktop version too . Please do share any ideas .

The website link is :: https://19bw01p1t997wuut-71493648693.shopifypreview.com

addtocart.jpg
addtocart.jpg502Ă—703 34.8 KB

2

Hey @Anonymous

Follow these Steps:

  1. Go to Online Store

  2. Edit Code

  3. Find theme.liquid file

  4. Add the following code in the bottom of the file above tag

RESULT:

Moeed_0-1693462825202.png
Moeed_0-1693462825202.png388Ă—599 88.6 KB

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

1 Like
3

Hey @Anonymous

Please try this css , you can add this in theme custom css file

@media (max-width: 768px) {
  .header__actions.col-auto {
    position: absolute;
    top: 24px;
    right: 0;
  }
}
1 Like
4

Hey @krtoos21
Follow these Steps:

  1. Go to Online Store

  2. Edit Code

  3. Find theme.liquid file

  4. Add the following code in the bottom of the file above tag

@media only screen and (max-width: 767px) {
.header__inner .header__search--bar {
   order: 1;
}

 .header__inner .header__actions.col-auto {
   
    align-items: center;
    padding: 0!important;
    justify-content: flex-end;
}

.header__inner .header__actions.col-auto 
.wishlist-whale-icon-launcher {
    
    margin-right: 0px!important;
    padding: 0px 9px!important;
}

  
}

SideNode_0-1693463113446.png
SideNode_0-1693463113446.png1909Ă—889 117 KB

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

1 Like
5

There @Anonymous

Try this.

  • From your Shopify admin dashboard, click “Online Store” and “Themes”.
  • Find the theme you want to edit and click “Actions” and then “Edit code”.
  • In the “Assets” folder, click on the “base.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
@media only screen and (max-width: 767px) {
.header__search--bar.col-auto {
    order: 4;
}
}

Copy

  • And Save.

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

RockTechnolabs_0-1693463082549.png
RockTechnolabs_0-1693463082549.png425Ă—526 64 KB

1 Like
6

Hi,

How can I also make the logo aligned to left like this.

logo.jpg

7

@Anonymous

Please add the below CSS and let me know

@media only screen and (max-width: 767px) {
.header__logo {
  width: calc(75% - 32px) !important;
  text-align: left !important;
}
.col-auto.d-none.menu--bar-lines.d-md-only-block {
  max-width: max-content;
padding-right: 0 !important;
}
.wishlist-whale-icon-launcher {
    margin-right: 0 !important;
}
}

Copy

1 Like
8

Its not moving more than this.

lu.jpg

9

@Anonymous Do you want the logo and hamburger more closer?

1 Like
10

Yes.

11

Is this ok?

RockTechnolabs_0-1693475457288.png
RockTechnolabs_0-1693475457288.png375Ă—526 50.2 KB

1 Like
12

Yes , This is perfect.

1 Like
13

Replace last code with this and let me know

@media only screen and (max-width: 767px) {
.header__logo {
  width: calc(75% - 32px) !important;
  text-align: left !important;
}
.col-auto.d-none.menu--bar-lines.d-md-only-block {
  max-width: max-content;
padding-right: 0 !important;
}
.wishlist-whale-icon-launcher {
    margin-right: 0 !important;
}
}

Copy

1 Like
14

@Anonymous

Please don’t forget to Like all comments and Mark Solution to the post that helped you. Thanks!

15

@Anonymous I think you mark solution other than me please review it

1 Like