Dawn - Add login button on mobile as on the desktop

Store Design
1

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
Ben1000_4-1647901939781.png1131×135 3.86 KB

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

Ben1000_2-1647901815316.png
Ben1000_2-1647901815316.png742×128 1.4 KB

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
Ben1000_6-1647902350759.png728×1272 6.72 KB

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

Thanks

1 Like
2

@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;
}
}
4 Likes
3

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.

1 Like
4

Hi @AvadaCommerce @KetanKumar ,

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

margin-right: -40px;

Because it’s above my cart logo.

4 Likes
5

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.

1 Like
6

@JackXu11

can you please share store url

7

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

8

is this solved ?!

9

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