Align store LOGO to Right Side in (Mobile View)

[alexalex_225]

can we align all header icons to left side, and LOGO to Right side (in Mobile view). right now it looks like this below image:

[niraj_patel]

Hello @alexalex_225

You can add code by following these steps

1. Go to Online Store → Theme → Edit code.

2. Open your theme.liquid file

3. Paste the below code before on theme.liquid

@media screen and (max-width:767px){ .header{ position:relative; } .header .header__heading-logo-wrapper { width: 100%; display: inline-block; transition: width 0.3s cubic-bezier(0.52, 0, 0.61, 0.99); position: absolute; top: 0; left: 30%; } .header details-modal.header__search { position: absolute; right: 36%; top:19px; } .header .header__icons a#cart-icon-bubble { position: absolute; left: 88px; padding-bottom: 0px !important; top:19px; } .header .header__icon--menu { position: absolute; top: 19px; } }

[websensepro]

Hi. @alexalex_225 .

Kindly share your store URL and password.

[alexalex_225]

@niraj_patel Altough LOGO move to the Right, but there’s too much spacing between icons. I want all the icons to be align to the left side. here’s how it is looking right now

[niraj_patel]

Hello @alexalex_225

replace code with this
@media screen and (max-width:767px){
.header .header__icon–menu {
position: absolute;
top: 19px;
}
.header .header__icons a#cart-icon-bubble {
position: absolute;
left: 17%;
padding-bottom: 0px !important;
top: 19px;
}
.header details-modal.header__search {
position: absolute;
right: 55%;
top: 19px;
}
}

[alexalex_225]

@niraj_patel Now looking like this in below image.

I want all the icons to be placed on extreme Left side and LOGO to be appear on extreme Right side in Mobile view. just like this image below:

[alexalex_225]

@websensepro kindly check your inbox

[niraj_patel]

Hello @alexalex_225

You can add code by following these steps

1. Go to Online Store → Theme → Edit code.

2. Open your theme.liquid file

3. Paste the below code before on theme.liquid

@media screen and(max-width:767px){ .header { position: relative; } .header .header__heading-logo-wrapper { width: 100%; display: block; transition: width 0.3s cubic-bezier(0.52, 0, 0.61, 0.99); position: absolute; left: 33%; } }

[alexalex_225]

@niraj_patel Logo is still appearing in the center in Mobile view. I need the LOGO to appear on the extreme Right side.