Secondary Menu Social Icons aligned on the right

Hi there,

I think this should be helpful:
https://generatepress.com/forums/topic/button-on-mobile-menu/#post-1624149

Instead of using plugin fontawesome that mentioned in the post, you could try icons from https://icons.getbootstrap.com/, no plugin needed.

Let me know :)

Hello Ying,

It seems the solution is more for mobile, we are aiming at the top bar, right side, on desktop, using FontAwesome as we have a PRO subscription.

We are using Flexbox, if it helps.

The method works no matter it's mobile or desktop. You just need to add the icon in to secondary navigation just like you adding the other menu items before.

Have you tried yet?

Hello there,

Our reply will be negative. Our aim is to keep the menu aligned on the left, and our social icons on the right.

Please advise.

Can you link us to the GP site in question with the social icon already added in?

Hello Leo,

Yes we can: https://www.atmostfear-entertainment.com/

Try this:

- Remove the menu-item-float-right class you've added to all the icons Except the first icon which is the Github icon currently.

- Add this CSS:

@media (min-width: 769px) {
    .secondary-navigation .main-nav {
        display: flex;
        flex: 1;
    }
    .secondary-navigation .main-nav>ul {
        flex: 1;
    }
    .secondary-navigation li.menu-item-float-right {
        margin-left: auto;
    }
}

Thank you Leo, this worked for us.

No problem :)