How can I rearrange icons in my mobile header?

[LabelSource]

Hi All,

I am looking to change my header mobile only. I want to put the magnifying glass (search icon) on the left side next to the hamburger menu. I then need to add a clickable button next to the basket.

website URL: https://label-source.co.uk/

 

[codewithpaul · Accepted solution]

that is now added in

I tried to keep a consistent style, it was trickier than i first thought due to the `position:absolute` .

Please email me at [email protected] if you have any questions and i can show you how to remove the code too. Thanks,

[codewithpaul · Accepted solution]

haha no worries!

Like this? (below is just a change on the dev tools so not on the site yet)

or more? (that's `3px`)

[oscprofessional]

@LabelSource 
Hii,

@media only screen and (max-width: 989px) {
.header__icon.header__icon--search.header__icon--summary.link.focus-inset.modal__toggle {
  position: absolute;
  left: 70px;
}
}

@media only screen and (max-width: 749px) {
.header__icon.header__icon--search.header__icon--summary.link.focus-inset.modal__toggle {
  position: absolute;
  left: 40px;
}
}

Add this css at the bottom of Online Store->Theme->Edit code->Assets->base.scss.liquid


like This

[LabelSource]

Thank you, search icon moved and looks great.

how do i now add anotehr icon next to the basket icon?

[LabelSource]

I would like to add a sell button to the header like the below next to our basket icon

[oscprofessional]

@LabelSource 

Please Share Store URL...

and Please Like And Accept Solution

[LabelSource]

URL: https://label-source.co.uk/

this would be on mobile only like the above image. I have a sell to us button on my navigation menu for desktop

[codewithpaul]

Hi ,

I made a short video to this on how you would do it in the dev tools as I don't have access to your theme but I think it gives a good idea on what to do

https://youtu.be/Z7HaxZ6My88

[LabelSource]

Thanks Paul, really appreciate your help! do you also know how i can now add a separate icon/button in place of where our search icon originally was?

[codewithpaul]

what would this button do? link to a new page?

[LabelSource]

Yes, we have an existing menu in our navigation for our 'sell to us' form. we would like a button nextto the basket in our header that would take people there too. like the below website

[codewithpaul]

Got cha! Right how I would do this is to edit the code and insert the button beside the basket and edit the css.  Normally for navigation you'd use an `a` tag and style it like a button for accessibility.

```

.whatever_button_class_is { display: none }

```

Then in the media query for mobile set it to be 

```

.whatever_button_class_is { display: block }

```

To be honest mate something like this would be tricky if you're not a dev, if you can give me developer access to your store I can add it in free of charge.

Or if you're not comfortable with that I can try put a video together on how to do it.

[LabelSource]

understandable mate, ive generated you a collaborator code: 4096

does this help? or do you need more from me to access? Thank you

[codewithpaul]

Perfect! just requested access now. feel free to email me at [email protected]

[codewithpaul · Accepted solution]

that is now added in

I tried to keep a consistent style, it was trickier than i first thought due to the `position:absolute` .

Please email me at [email protected] if you have any questions and i can show you how to remove the code too. Thanks,

[LabelSource]

Paul that is spot on thank you! is it possible to remove the outer box and have just an underline under the word? i think it is rather large in comparison to the other icons! but overall exaclty what was needed thank you!

[codewithpaul]

Yup very possible! Done now.

[LabelSource]

Paul you are the man!! thank you so much, this is going to sound very a-nal but can the line below the word sell be dropped just slightly lower so it doesn't look like it is touching, Like the below image where the red line is? if not no worries it is perfect.

[codewithpaul · Accepted solution]

haha no worries!

Like this? (below is just a change on the dev tools so not on the site yet)

or more? (that's `3px`)

[LabelSource]

thats the one please, absolute perfect thank you

[codewithpaul · Accepted solution]

Done! 

[LabelSource]

you are a star mate! thank you

[codewithpaul]

No probs! Keep me in mind if you are ever looking for a Shopify Dev to do work! 😆

[Jiozx]

@codewithpaul could you possibly help me? What do I change in base.css to change the position for mobile only?

[Mir96]

Hi Paul!

Could you do this on my website too? Or let me know what coding you used to make it appear on the left side? 

Website URL: notmeonline.com

Password: NotMe