[Support request] Alignment of Social Icons in Desktop and Mobile Menu

[Kevin Benjamin]

I’m currently trying to change the spacing and the font size of the social icons on the primary desktop menu and to align them to the right side of the menu. Beside of that I would like to center the social icons of the primary menu on the mobile menu instead of having them placed under each other. How can I accomplish that? Is there a way using CSS?

[Elvin]

Hi,

You can try this CSS.

/* Add margin to the left of 6th child (for centering) */
nav#generate-slideout-menu ul li:nth-child(6) {
    margin-left: auto;
}
/* Add margin to the right of last child (for centering) */
nav#generate-slideout-menu ul li:last-child {
    margin-right: auto;
}
/* for setting icon size */
.slideout-navigation.main-navigation .main-nav ul li.menu-item-float-right a .fas, .slideout-navigation.main-navigation .main-nav ul li.menu-item-float-right a .fab {
    font-size: 25px;
}

[Kevin Benjamin]

Hi Elvin, Thanks for your reply. That helped within the Off-Canvas menu. But how can I achieve this with the normal Mobile Menu? Is it also possible to bring the Social Icons on the desktop menu to the right corner?

[Tom]

Instead of adding them to the menu, try this method: https://docs.generatepress.com/article/generate_menu_bar_items/

[Kevin Benjamin]

Thank you. Now I’m really statisfied with the look of the mobile menu. Is there a similiar way to customize the position and size of the icons in the desktop menu and to move them to the right side, too?

[Elvin]

Are you trying to make it look like this? https://share.getcloudapp.com/DOuogWee

If so, try adding this CSS:

@media (min-width:769px){
.menu-bar-items {
margin-left:auto;
}
}

but if this is the look you’re trying to achieve: https://share.getcloudapp.com/NQuKbEEb

add this instead:

div#primary-menu {
    margin-left: auto;
    margin-right: auto;
}

[Author]

Posts