Re: Dawn mobile header icons change

Solved

How can I rearrange icons in my mobile header?

LabelSource
Explorer
60 1 10

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/

 

BE493AB3-34A0-400D-8336-F229121E1603_1_201_a.jpeg

 

 

Accepted Solutions (3)
codewithpaul
Shopify Partner
123 13 22

This is an accepted solution.

that is now added in

codewithpaul_0-1656944733304.png

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

 

Please email me at contact@codewithpaul.com if you have any questions and i can show you how to remove the code too. Thanks,

If I helped then please Like and Accept the Solution
Contact me at contact@codewithpaul.com
For Shopify Design Changes | Shopify App Development | Custom Modifications Into Shopify Theme

View solution in original post

codewithpaul
Shopify Partner
123 13 22

This is an accepted solution.

haha no worries!

 

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

codewithpaul_0-1656945782679.png

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

If I helped then please Like and Accept the Solution
Contact me at contact@codewithpaul.com
For Shopify Design Changes | Shopify App Development | Custom Modifications Into Shopify Theme

View solution in original post

codewithpaul
Shopify Partner
123 13 22

This is an accepted solution.

Done! 

If I helped then please Like and Accept the Solution
Contact me at contact@codewithpaul.com
For Shopify Design Changes | Shopify App Development | Custom Modifications Into Shopify Theme

View solution in original post

Replies 23 (23)

oscprofessional
Shopify Partner
15984 2392 3099

@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

oscprofessional_0-1656937949085.png

 

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing | Oscp Upsell & Cross sell App : Free | Oscp Sales & Volume Discount App : Free | Custom Pricing Wholesale App : Free
LabelSource
Explorer
60 1 10

Thank you, search icon moved and looks great.

 

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

LabelSource
Explorer
60 1 10

 

 

 

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

 

257379DA-46DC-4501-A43C-CCBDDEA23C79_1_201_a.jpeg

oscprofessional
Shopify Partner
15984 2392 3099

@LabelSource 

Please Share Store URL...

and Please Like And Accept Solution

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing | Oscp Upsell & Cross sell App : Free | Oscp Sales & Volume Discount App : Free | Custom Pricing Wholesale App : Free
LabelSource
Explorer
60 1 10

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
Shopify Partner
123 13 22

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

If I helped then please Like and Accept the Solution
Contact me at contact@codewithpaul.com
For Shopify Design Changes | Shopify App Development | Custom Modifications Into Shopify Theme
LabelSource
Explorer
60 1 10

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
Shopify Partner
123 13 22

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

If I helped then please Like and Accept the Solution
Contact me at contact@codewithpaul.com
For Shopify Design Changes | Shopify App Development | Custom Modifications Into Shopify Theme
LabelSource
Explorer
60 1 10

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

 

257379DA-46DC-4501-A43C-CCBDDEA23C79_1_201_a.jpeg

codewithpaul
Shopify Partner
123 13 22

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.

If I helped then please Like and Accept the Solution
Contact me at contact@codewithpaul.com
For Shopify Design Changes | Shopify App Development | Custom Modifications Into Shopify Theme
LabelSource
Explorer
60 1 10

understandable mate, ive generated you a collaborator code: 4096

 

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

codewithpaul
Shopify Partner
123 13 22

Perfect! just requested access now. feel free to email me at contact@codewithpaul.com

If I helped then please Like and Accept the Solution
Contact me at contact@codewithpaul.com
For Shopify Design Changes | Shopify App Development | Custom Modifications Into Shopify Theme
codewithpaul
Shopify Partner
123 13 22

This is an accepted solution.

that is now added in

codewithpaul_0-1656944733304.png

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

 

Please email me at contact@codewithpaul.com if you have any questions and i can show you how to remove the code too. Thanks,

If I helped then please Like and Accept the Solution
Contact me at contact@codewithpaul.com
For Shopify Design Changes | Shopify App Development | Custom Modifications Into Shopify Theme
LabelSource
Explorer
60 1 10

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
Shopify Partner
123 13 22

Yup very possible! Done now.

If I helped then please Like and Accept the Solution
Contact me at contact@codewithpaul.com
For Shopify Design Changes | Shopify App Development | Custom Modifications Into Shopify Theme
LabelSource
Explorer
60 1 10

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.26333A04-FA61-47D6-8FED-DBD265AEDC71.png

codewithpaul
Shopify Partner
123 13 22

This is an accepted solution.

haha no worries!

 

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

codewithpaul_0-1656945782679.png

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

If I helped then please Like and Accept the Solution
Contact me at contact@codewithpaul.com
For Shopify Design Changes | Shopify App Development | Custom Modifications Into Shopify Theme
LabelSource
Explorer
60 1 10

thats the one please, absolute perfect thank you

codewithpaul
Shopify Partner
123 13 22

This is an accepted solution.

Done! 

If I helped then please Like and Accept the Solution
Contact me at contact@codewithpaul.com
For Shopify Design Changes | Shopify App Development | Custom Modifications Into Shopify Theme
LabelSource
Explorer
60 1 10

you are a star mate! thank you

codewithpaul
Shopify Partner
123 13 22

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

If I helped then please Like and Accept the Solution
Contact me at contact@codewithpaul.com
For Shopify Design Changes | Shopify App Development | Custom Modifications Into Shopify Theme
Jiozx
Pathfinder
136 4 51

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

Omar Al-Ali
Founder of Clothing Brand Axiom Unit
Webshop: https://axiomunit.store
Mir96
Tourist
8 0 1

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