Existem algumas lojas que gostam de colocar um botão Meus Pedidos apenas para desktop. Logo, lá em header__buttons
você pode colocar uma tag "a", como <a style="font-size: 1rem" class="d-none d-md-inline btn btn-lg" href="/app/#/account/orders">Meus pedidos</a>
, com as classes d-none d-md-inline, que irá forçar um display none, porém como terá um display inline block para tamanhos de tela md (medium|desktop), irá mostrar apenas no desktop, para mobile será escondido.
Caso queira que mostre apenas no mobile, você pode colocar uma tag html com a classe d-md-none
, que irá mostrar para todos os tamanhos de tela, porém para o tamanho md(desktop), irá esconder.
Um exemplo aplicando ambas modalidades é:
<a id="user-button" class="btn btn-lg" role="button" href="/app/#/account/" style="font-size: 1rem" title="Minha conta">
<span class="d-none d-md-inline">Minha conta</span>
<span class="d-md-none">
<i class="fas fa-user"></i>
</span>
</a>
Veja que temos inserido d-none d-md-inline para a tag "span" com o escrito Minha Conta, ou seja, irá mostrar apenas para desktop. Já no mobile irá mostrar o ícone fas fa-user, porque ela está dentro de uma tag "span" que tem uma classe d-md-none, ou seja, mostrará para mobile e esconderá para desktop