Bootstrap 4: itens persistentes da barra de navegação fora do contêiner recolhido

Navegar em um site pode ser frustrante quando links importantes, como ícones de mídia social, desaparecem quando a barra de navegação é recolhida em tamanhos menores telas. Felizmente, o Bootstrap 4 oferece uma solução elegante para manter certos itens da barra de navegação visíveis mesmo quando o menu está recolhido. . Esse comportamento é controlado pela classe .collapse. Por padrão, todos os elementos dentro do contêiner .collapse ficam ocultos quando o recolhimento é ativado.

Solução

Para evitar que certos itens da barra de navegação desapareçam com o recolhimento, basta movê-los para fora do contêiner .collapse . Isso pode ser conseguido usando as classes de utilitário order-* para ajustar a ordem do flexbox dos elementos.

Exemplo de código