Aligning social icons in Nav bar

[SupK]

Hello,

I’d like to align social icons in nav bar as the attached image. How can I move the social icons to the center? I’m using custom social icons and following css codes.

.x-icon-xing-square:before,.x-icon-youtube-square:before, .x-icon-facebook-square:before { content: " "; }
i.x-icon-xing-square {
    background: url(/wp-content/uploads/sns_naverpost.gif); 
    background-size: contain; 
    background-position: center; 
    background-repeat: no-repeat; 
    float: right; 
    margin-right: 5px; 
    display: inline-block; 
    width: 18px; 
    height: 18px; 
}
i.x-icon-youtube-square {
    background: url(/wp-content/uploads/sns_youtube.gif); 
    background-size: contain; 
    background-position: center; 
    background-repeat: no-repeat; 
    float: right; 
    display: inline-block; 
    width: 18px; 
    height: 18px; 
}
i.x-icon-facebook-square { 

    background: url(/wp-content/uploads/sns_facebook.gif); 
    background-size: contain; 
    background-position: center; 
    background-repeat: no-repeat; 
    float: right; 
    margin-right: 5px; 
    display: inline-block; 
    width: 18px; 
    height: 18px; 
}

[Joao]

HI There,

I would suggest you adding your icons as a label of Custom Links of your navabr on Appereance > Navbar

Once you do that you can float them to the left.

Hope it helps

[SupK]

Hi Joao,

What do you mean by Appearance -> Navbar? I can’t find this option in WP default theme menu or X-theme menu.

Let me ask you again. Actually, I want to move my custom social icons to the center of the header above menu. It maybe seems to have two rows in navbar. But, I’m not using topbar. Could you check the attached images again? I’ve been changing the css codes. Nothing worked out.

Thanks a lot.

[christopher]

Hi there,

It is not a correct place to add the social icons. With the way you added which the Custom Social wrapping div is in one level with all other nav elements it is not possible to force the social icons to go to the top in a centered way.

You will need to use the Topbar to add your social icons. There is no Custom CSS way to achieve the current setup you have.

Thank you for your understanding.

[SupK]

Hi Christopher,

Can you give me some more advice on this? I’ve tried to use top bar at first. But, I couldn’t figure out how to apply custom social icons and move to center either. When I used top bar, social icons were positioned at right. I’ve also used contents section of the top bar. It didn’t work out.

Thank you for your kind supports.

[jumar]

Hello there,

I can see with your current menu bar setup that the only lacking thing to do is to put your social icons centered. You can add the code below to X > Theme Options > JS:

jQuery(document).ready(function($){
    $( ".x-social-global" ).insertBefore( ".x-navbar-inner" );
});

And add this code to X > Theme Options > CSS:

.x-navbar-inner {
    margin: 20px 0;
}
.x-social-global {
    font-weight: 400;
    line-height: 1;
    margin: 20px auto;
    text-align: center;
    clear: both;
}
.x-nav-wrap.mobile {
    display: none;
    clear: both;
    overflow: hidden;
}
.x-social-global a i {
    margin: 0 auto;
    padding: 0 40px;
}

Hope that helps.

[SupK]

Hi Jumar,

It works perfectly. I have one more question. I used the following css code to reduce the unnecessary space between x-nav-inner and x-social-global. Is this safe to use?

.x-navbar-inner { margin: 0; margin-top: -30px; }

Thank you so much.

[jumar]

Hello there,

Glad to hear that!

I suggest you remove the margin: 0; as it is unecessary. For your convenience:

.x-navbar-inner {
    margin-top: -30px;
}

Hope that helps.

[SupK]

Hi Jumar,

Thank you for your suggestion. Let me ask you one more thing. Social icons’ links don’t work. I don’t know what the problem is. Sorry for late checking. Could you check the social icons’ links again?

[paul.r]

Hi,

To fix it, you can add this in Theme Options > CSS

.x-social-global {
    z-index: 99999;
    position: relative;
}

Hope this helps

[SupK]

Hi Paul,

Awesome, it works perfectly.

Thank you.

[thai]

You’re welcome.