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

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

Home Forums Support Alignment of Social Icons in Desktop and Mobile Menu

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #1547682
    Kevin

    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?

    #1547852
    Elvin
    Staff
    Customer Support

    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;
    }

    A wise man once said:
    "Have you cleared your cache?"

    #1550065
    Kevin

    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?

    #1550562
    Tom
    Lead Developer
    Lead Developer
    #1550787
    Kevin

    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?

    #1550901
    Elvin
    Staff
    Customer Support

    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;
    }

    A wise man once said:
    "Have you cleared your cache?"

Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.