Dawn - Add login button on mobile as on the desktop

[Ben1000]

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:

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

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

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

Thanks

[KetanKumar · 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;
}
}

[KetanKumar · 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;
}
}

[Xana67]

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]

is this solved ?!

[AvadaCommerce · 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.

[Ben1000]

Hi @AvadaCommerce @KetanKumar,

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

    margin-right: -40px;

Because it's above my cart logo.

[JackXu11]

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]

@JackXu11 

can you please share store url

[Fmonzer]

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