Have your say in Community Polls: What was/is your greatest motivation to start your own business?

Re: Dawn - Add login button on mobile as on the desktop

Solved

Dawn - Add login button on mobile as on the desktop

Ben1000
Trailblazer
262 3 74

Hi,

 

I'm using the Dawn 2.0 theme.

 

https://wortheattt.myshopify.com/

 

On the header section in the desktop platform, I have my login button:

Ben1000_4-1647901939781.png

 

 

But on the mobile platform, I don't have the logo button on my header:

Ben1000_2-1647901815316.png

 

 

Only after clicking the menu sign → the login button is beneath all the menu as you can see in this picture:

Ben1000_6-1647902350759.png

 

How can I add the login button to the header section in the mobile version?

 

Thanks

Accepted Solutions (2)

KetanKumar
Shopify Partner
37409 3661 12115

This is an accepted solution.

@Ben1000 

sorry for that issue can you try this code

1. Go to Online Store->Theme->Edit code
2. Asset->/base.css ->paste below code at the bottom of the file.

@media screen and (max-width: 749px) {
a.header__icon.header__icon--account.link.focus-inset.small-hide {
    display: flex !important;
    margin-right: -40px;
}
}

 

If helpful then please Like and Accept Solution. Partnership of your ️ Coffee Tips and my code can bring miracles.
Want to modify or custom changes on store Hire Me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing

View solution in original post

AvadaCommerce
Shopify Partner
3879 839 990

This is an accepted solution.

Hi @Ben1000 ,

 

You can follow the instruction below:

1. Go to Online Store->Theme->Edit code
2. Asset->/base.css->paste below code at the bottom of the file:

 

@media (max-width: 749px) {
  .header__icon.header__icon--account.link.focus-inset.small-hide {
     display: flex !important;
     margin-right: -40px;
  }
}

 

If you feel like my answer is helpful, please mark it as a SOLUTION. Let me know if you have any further questions.

Best regards.

banned

View solution in original post

Replies 8 (8)

KetanKumar
Shopify Partner
37409 3661 12115

This is an accepted solution.

@Ben1000 

sorry for that issue can you try this code

1. Go to Online Store->Theme->Edit code
2. Asset->/base.css ->paste below code at the bottom of the file.

@media screen and (max-width: 749px) {
a.header__icon.header__icon--account.link.focus-inset.small-hide {
    display: flex !important;
    margin-right: -40px;
}
}

 

If helpful then please Like and Accept Solution. Partnership of your ️ Coffee Tips and my code can bring miracles.
Want to modify or custom changes on store Hire Me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Xana67
New Member
4 0 0

Hi @KetanKumar @AvadaCommerce  I have just used this code and it work but there is too much space between all 3 icons (search, account & basket). Is there anything I can do to make them closer to each other?

many thanks 

rishi1897
Shopify Partner
53 3 5

is this solved ?!

 

AvadaCommerce
Shopify Partner
3879 839 990

This is an accepted solution.

Hi @Ben1000 ,

 

You can follow the instruction below:

1. Go to Online Store->Theme->Edit code
2. Asset->/base.css->paste below code at the bottom of the file:

 

@media (max-width: 749px) {
  .header__icon.header__icon--account.link.focus-inset.small-hide {
     display: flex !important;
     margin-right: -40px;
  }
}

 

If you feel like my answer is helpful, please mark it as a SOLUTION. Let me know if you have any further questions.

Best regards.

banned

Ben1000
Trailblazer
262 3 74

Hi @AvadaCommerce @KetanKumar,

 

Thank you it works, I just deleted the code line:

    margin-right: -40px;

 

Because it's above my cart logo.

JackXu11
Tourist
4 0 2

Hi Ben, Nice to meet you. I meet the same problem with you. Do the same thing like you did, but didn't work. Can you share more details about adding login button. Thank you very much.

KetanKumar
Shopify Partner
37409 3661 12115

@JackXu11 

can you please share store url

If helpful then please Like and Accept Solution. Partnership of your ️ Coffee Tips and my code can bring miracles.
Want to modify or custom changes on store Hire Me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Fmonzer
Visitor
1 0 0

Hi KetanKumar

could you help please, I pasted the code on base.css but still not showing the icon on the mobile. 

Www.Lumeire.co.uk