Como mover um item de link específico para a direita do cabeçalho?

Dev
,
1

Ótimo TC, uma pergunta rápida sobre como mover a seção .links para a direita com CSS. Tenho tentado mover um único link de .nav .nav-pills para a direita, mas não consegui. Consigo mover todo o .contents usando justify-content: right, mas isso não funciona para a seção .links, e não consigo entender a interação entre o Flexbox e as partes não-Flexbox do cabeçalho.

Não tenho nada na seção Ícones, mas tentei configurar um ícone para aprender por que eles estão à direita, no entanto, de alguma forma, ainda me escapa.

Alguém tem um snippet CSS simples que moveria os Links para a direita?

1 curtida
2

Olá Marcus,
Se eu entendi bem, este SCSS deve fazer o que você quer:

.b-header nav.links {
    .nav-pills, & {
        display: flex;
        flex: 1;
        li:last-child {
            margin-left: auto;
        }
    }
}

image
image1362×126 9.61 KB

3 curtidas
3

Funciona perfeitamente, obrigado @Canapin!
Eu tinha tentado padding-left: auto no elemento necessário, mas não margin-left: auto! Meu conhecimento de CSS não é forte.

2 curtidas
4

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.