Social media in nav bar

Support
#1

Hello-

I am working on a site and I am trying to get the social media icons to go to the right of the menu on the same line as the menu. I tried adding them as links with icons and that did not work, and I also tried some cutom CSS which I had found here.

Any thoughts on how I can place the icons to the right of the menu here:
https://cerami.wpengine.com/

#2

Hi Nancy,

Thanks for posting in! To resolve your issue, please go to Appearance > Menus and edit your menu. Add a custom menu link as the last menu item as shown in the image below:

You will need to insert the icon code:

<i class="x-icon x-icon-facebook-square" data-x-icon-b="&#xf09a;"></i>

You can get the class x-icon-{classsname} and the data-x-icon-b="&#x{value};" from here: https://fontawesome.com/icons

For more details, please check out this threads:

#3

Beautiful! Thank you. I can style them with CSS now also. Thank you.

Any direction now on how to get the menu items closer together? I cannot seem to get any of my CSS to work for this yet.

#4

Hi Nancy,

Glad it’s working, and about the menu spacing, then please add this CSS to your Theme Options > CSS

.x-navbar .desktop .x-nav > li > a > span {
padding: inherit 0px;
}

The menu item has spacing, so changing the span spacing within the menu should reduce it a bit.

Thanks!

#5

Thank you!

That helped a bit for sure! but now, try as I may, I cannot get the menu to align with the center of the logo? and it would be nice to have the social media items be closer!

#6

Hi Nancy,

Please also add this code in the Global CSS:

#menu-item-99 a span, #menu-item-100 a span {
    padding-left: 0;
    padding-right: 0;
}

then to move the menu items lower, please set the value X > Theme Options > Header then increase the value set in Navbar Top Link Alignment (px)

Hope this helps.

#7

Trying to do the same myself and the above doesn’t seem to work. Any suggestions? Screenshot attached.

#8

Hi Emma,

Please try this code in the Global CSS:

.x-navbar .desktop .x-nav>li .x-icon-linkedin-square {
    margin-top: -6px;
}

Feel free to change the value of the top margin.

Hope this helps.

#9

Hey Jade, thanks for this. However, I meant that my issue was a reference to the initial bug about the icon not showing at all. Screenshot attached :slight_smile: Thank again, Emma

#10

Hello Emma,

Please update your icon code and use this:

<i class="x-icon x-icon-linkedin" data-x-icon-b="&#xf08c;"></i>

Icon reference: https://fontawesome.com/icons/linkedin?style=brands

We would loved to know if this has work for you. Thank you.

#11

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.