How to move a specific link item to the right of the header?

dev
,
1

Great TC, one quick question about moving the .links section to the right with CSS. I’ve been attempting to move a single link from .nav .nav-pills over to the right but have not been able to achieve this. I can move the entire .contents around using justify-content: right but this doesn’t work for the .links section, and I can’t work out the interplay between the Flexbox and the non-Flexbox parts of the header.

I don’t have anything in the Icons section, but I did try configuring an icon in order to learn why they are over to the right, however somehow it eludes me still.

Anyone got a simple CSS snippet that would move the Links to the right?

1 Like
2

Hello Marcus,
If I understand well, this SCSS should do what you want:

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

image
image1362×126 9.61 KB

3 Likes
3

Works perfectly thanks @Canapin !
I had tried padding-left: auto on the requisite element, but not margin-left: auto! My CSS-fu is not strong.

2 Likes
4

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