How can I rearrange header icons in the Impulse theme?

Store Design
1

Hello

I have added a Wishlist App and now have an Icon in my header - great

However how can I alternate the places. I would like to Cart icon to be after the Wishlist heart

TBS2022_0-1677126418834.png
TBS2022_0-1677126418834.png658×156 20.5 KB

also in mobile view the icons are too close together

TBS2022_1-1677126457073.png
TBS2022_1-1677126457073.png376×150 13.5 KB

I am using the impulse theme

www.thebodyshop.re

password: lahays

thanks in advance

1 Like
2

Hi @TBS2022,

You can try this code by following these steps:

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file theme.css

Step 3: Paste the below code at bottom of the file → Save

@media(max-width:767px){
[href="/apps/wishlist"]{
transform:translateX(-20px) !important
}
[href="/cart"]{
transform:translateX(30px) !important
}
}

PageFlyVictor_0-1677127392391.png
PageFlyVictor_0-1677127392391.png193×218 17.5 KB

Hope my solution works perfectly for you!

Best regards,

Victor | PageFly

3

nothing happened :disappointed_face:

4

Hello There,

Admin go to online store → themes → actions → edit code
Find Asset >theme.css and paste this at the bottom of the file:

a.th_wlc_position_relative {
    position: absolute;
    right: 35px;
}
.header-layout.header-layout--center {
    position: relative;
}
@media only screen and (max-width: 769px) {
    a.th_wlc_position_relative {
        position: absolute;
        right: 79px;
    }
    a.site-nav__link.site-nav__link--icon.js-search-header.medium-up--hide {
        padding: 10px;
    } 
}

ZestardTech_0-1677127697400.png
ZestardTech_0-1677127697400.png1341×326 20.2 KB

1 Like
5

You can add code to the top of the file. Because have one error structure so my code to push the bottom doesn’t work

6

fantastic- thanks

7

what about in mobile view

TBS2022_0-1677128156574.png
TBS2022_0-1677128156574.png376×150 13.5 KB

8

on another note - is there anyway to move the search icon to the right with the other icons?

thanks

9

@TBS2022

Please add the following CSS code to your assets/theme.css bottom of the file.

.site-nav__icons {padding: 0px 10px 0px 10px !important;}

Thanks!

10

Thank you for your response. It’s good to know that it’s worked for you. Kindly feel free to get back to me if you need any further assistance.

11

doesnt work :disappointed_face:

1 Like
12

Hello There,

Admin go to online store → themes → actions → edit code
Find Asset >theme.css and paste this at the bottom of the file:

@media only screen and (max-width: 1017px) {
    .header-layout.header-layout--center {
        position: relative;
    }
    a.th_wlc_position_relative {
        position: absolute;
        right: 40px;
    }
    a.site-nav__link.site-nav__link--icon.js-search-header.medium-up--hide {
        padding: 10px;
    } 
}
@media only screen and (max-width: 769px) {
    a.th_wlc_position_relative {
        right: 11%;
    }
}
@media only screen and (max-width: 600px) {
    a.th_wlc_position_relative {
        right: 15%;
    }
}
13

I have added this code in the bottom its not working. After I have added in the top but still does not happening any thing.

14

I said this is not worked