Archived topic
Alignment of Social Icons in Desktop and Mobile Menu
5 replies · Started by Kevin Benjamin on November 25, 2020
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?
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;
}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?
Instead of adding them to the menu, try this method: https://docs.generatepress.com/article/generate_menu_bar_items/
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?
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;
}