Move icons on header

EdgarSeller
Tourist
12 0 0

😩Help is needed. Please tell me how I can move the cart icon a centimeter to the left because when there is a product in it, the circle is closed and only half visible.
You also need to move the logo to the center
And a search button.
Please help anyone who understands how to do this, since I’m a

move.png

Please help anyone who understands how to do this, since I’m a complete noob in CSS myself.

Replies 19 (19)

Emirates7
Shopify Partner
197 44 47

Hi EdgarSeller,

 

Can you provide your store url?

 

Regards,

Emirates7

EdgarSeller
Tourist
12 0 0
Emirates7
Shopify Partner
197 44 47

Hi,

 

Go to Online Stores -> Themes -> Customize -> Theme Settings -> Custom CSS and add below code:

 

@media (max-width: 767px) {
.header__search {
    position: absolute !important;
    top: 50% !important;
    left: 55px !important;
    transform: translateY(-50%) !important;
}
.header__heading {
padding-right: 90px;
}
}

 

1.png

 

Regards,

Emirates7

EdgarSeller
Tourist
12 0 0

Now its look like this😭
EdgarSeller_0-1707371286534.png

 

Emirates7
Shopify Partner
197 44 47

Here is new code:

 

@media (max-width: 767px) {
.header__search .header__icon  {
    position: absolute !important;
    top: 50% !important;
    left: 55px !important;
    transform: translateY(-50%) !important;
}
.header__heading {
padding-right: 90px;
}
}

 

Regards

 

EdgarSeller
Tourist
12 0 0

With search all good. But if i link another page(not home) logo still no center. And cart still hidden(need move right a bit)

EdgarSeller_0-1707371849010.png

 

Emirates7
Shopify Partner
197 44 47

Hi,

 

I found in your store below code:

 

1.png

 

You need to remove it. I don't know where you exactly added it.

 

Regards,

Emirates7

EdgarSeller
Tourist
12 0 0

Oh i have no idea how can i find, but i try now

EdgarSeller
Tourist
12 0 0

I tried to find it but couldn't find it, recently the Vitals app changed something. I have no idea how to search, I just used ctrl+F but it didn't help

Emirates7
Shopify Partner
197 44 47

Hi,

 

Here is new css code:

@media (max-width: 767px) {
.header__search .header__icon  {
    position: absolute !important;
    top: 50% !important;
    left: 55px !important;
    transform: translateY(-50%) !important;
}
#shopify-section-sections--21764383310165__header .header--top-center .header__inline-menu, #shopify-section-sections--21764383310165__header .header--top-center .header__heading-link {
margin-right: 0 !important;
}
.header__icon--cart {
margin-right: 0px;
}
}

 

Regards,

Emirates7

EdgarSeller
Tourist
12 0 0

This is definitely better!❤️ Almost perfect, now only in the desktop version the cart is still not visible as it was before in the mobile

Emirates7
Shopify Partner
197 44 47

The code I sent you is intended solely for the mobile version. Could you please provide a screenshot depicting how it appears on the desktop?

EdgarSeller
Tourist
12 0 0

Exactly 😃

EdgarSeller_0-1707375286381.png

 

Emirates7
Shopify Partner
197 44 47

Try this code:

.header__icon--cart {
z-index: 999 !important;
}

 

Regards

EdgarSeller
Tourist
12 0 0

Its looks good, but i cant save. When i put this code, they write to me 

Online Store editor session can't be published

Emirates7
Shopify Partner
197 44 47

You need to logout and login again to your admin panel. It's shopify bug.

EdgarSeller
Tourist
12 0 0

it didn't help 😶

 
Emirates7
Shopify Partner
197 44 47

try clear cookies.

Ritu-25
Shopify Partner
129 26 17

Hello, 

Add this in base.css : 

 

@media(max-width: 479px){
.header--top-center>.header__search { display: block; margin-left: 35px; }
.header--top-center *>.header__search { display: none; }
}

Let me know if this helps you. 

Thanks, 

Ritu 

 

If helpful then please Like and Accept Solution.
You can directly PM.
Email Me : nayakritu.2506@gmail.com