Moving Menu Logo Beside Cart Logo For Mobile Only (Dawn Theme)

[Attractivist]

[websensepro]

Hi, @Attractivist .

Kindly share your store URL and password.

[Attractivist]

www.attractivistapparel.com

Password: Attractivist

[niraj_patel]

Hello @Attractivist

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__icons { position: absolute; right: 14%; } .header .header__icon--menu { position: absolute; right: 0; top: 32%; } }

[Attractivist]

I Added Code & It Look Like This. I Have Done A lot Of Coding To My Store So I Think It’s Interfering With Codes I Have

[websensepro]

Hi, @Attractivist .

Follow These steps,

Go to the online store theme and go to base.css file paste the code mentiond below.

@media (min-width: 320px) and (max-width: 767px) {

.header {
    grid-template-areas:
        "left-icon icons heading"!important;
    grid-template-columns: 1fr 1fr 4fr !important;
}

.header__heading-logo {width: 80%;margin-left: 40px;}

}

Result:

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

[Attractivist]

I Want To Move Menu Icon Beside Cart Icon Not My Brand Logo

[websensepro]

Sorry, my bad.

Add this CSS code.

@media (min-width: 320px) and (max-width: 767px) {

.header {
    display: flex;
    flex-direction: row-reverse;
}

.header__heading-logo {
    position: absolute;
    top: 5px;
    left: 5px;
    width: 45% !important;
}

}

Result:

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

[niraj_patel]

Hello @Attractivist
replace code with this
@media screen and (max-width:767px){
.header-wrapper {
position: relative;
}
.header-wrapper .header__icons {
position: absolute;
right: 68px;
}
.header-wrapper header-drawer {
position: absolute;
}
}

[Attractivist]

It Didn’t Work, Code Was Showing At The Bottom Of The Policies

[Attractivist]

What File?

[websensepro]

You have base.css file, theme.css and style.css find one file and paste the code at very bottom.

Second Option.

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.

[Attractivist]

I Was Able To Move It But Stuff Was Moved On My Website. It Was Spaced Out Before And I Liked It. Now Everything Is Close To Eachother

[niraj_patel]

theme.liquid

[Attractivist]

This What I Got

[niraj_patel]

Hello @Attractivist

please paste this all code in base.css file at bottom.

[niraj_patel]

Hi @Attractivist
It happed because you forget to add tag, You have to paste code between this tag.