Center the cart, search and other icons in header below logo [you can get 5 bucks:)]

[Paul_K_1]

hey guys, so i’m using debut theme and i want to center the 3 icons of the upper right below the centered logo of my shop (look at image).

furthermore, as you know if you have a look at the shop in mobile view the menu gets combined in this little 4th icon which you can click and then the menu is visible.

This i would like to integrate in pc view too.

And yeah thx if anyone can help:) hope someone is good at coding

[if somebody really codes me the solution and it turns out like I’ve photoshopped it in the last image imma send this guy 5 bucks via paypal like asap.]

[Adude]

Hi @Paul_K_1

It’s an easy task which doesn’t require any coding just patience and focus then you will surely get it done. Contact me to educate you more on how to do it perfectly or if you want me to do it for it’s something am capable of helping it’s not because of your money but to build trust and help other where are lacking. Kindly reply to this then I will give you the necessary information

[Paul_K_1]

@Adude hey man, thx for replying:)

if you know how to do it that easy pls tell me.

[Adude]

Okay

[Paul_K_1]

do you need anything more from me bro? the theme file or some?

[Adude]

Yeah add me as a staff on your site then u will get it done ASAP

[Adude]

This is the Gmail details emmysales08@gmail.com kindly notify me when you’re done

[diego_ezfy]

@Paul_K_1 , do this to fix it in 20 seconds:

1. In your Shopify Admin go to: online store > themes > actions > edit code
2. Find Asset > theme.scss.liquid or theme.css and paste this at the bottom of the file:

@media (min-width: 749px){
    .js-mobile-nav-toggle{
    display: block !important;
}

#AccessibleNav{
    display: none !important;
}

.site-header > * {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.site-header > * > * {
left: unset !important;
}

.site-header > * > *:nth-child(2) > *{
display: flex;
align-items: center;
justify-content: center;
}

.mobile-nav-wrapper.js-menu--is-open{
    transform: translateY(165px);
    display: block !important;
    z-index: 0;
}

   
}

Ideally it would require some extra coding to ensure it looks nice, but this works well as a “barebone”.

Kind regards,
Diego

[Paul_K_1]

@diego_ezfy you’re insane man !

one last thing, do you know how to get the menu dropdown as the first icon not as the last?

order should be (read from the left): menu, search, customer account, cart

image: position of the dropdown like i painted it but the menu should stay centered of course:)

[diego_ezfy]

Hi, @Paul_K_1

Happy to help. Please follow the previous steps and add this code:

.site-header__icons-wrapper > *:nth-child(1){
    order: 2;
}

.site-header__icons-wrapper > *:nth-child(2){
    order: 3;
}

.site-header__icons-wrapper > *:nth-child(3){
    order: 4;
}

.site-header__icons-wrapper > *:nth-child(4){
    order: 1;
}

@media (max-width: 749px){
    .site-header__icons-wrapper > *:nth-child(4){
    margin-right: -5px;
}
}

Kind regards,
Diego

[Paul_K_1]

just optimized it a bit with the position and it looks exactly how I wanted!

thank you

if I should have any more questions i’ll let you know