Docs

[pjayd]

Hi there,

I followed your guidelines from another question to add my social icons to the nav bar by inserting a custom link in the menu and inserting the code into the navigation label.

I tried adding the css to change the color of those icons, but they are still not appearing (I’m assuming they are white). Can you please help?

You can check quarterforyourcrisis.com/blog to see what it looks like.

[Prasant Rai]

Hello There,

Thanks for writing in!

There seems to be an active under construction page. Kindly provide us with the admin details to your site so that we’ll able to check this further.

Thank you.

[pjayd]

This reply has been marked as private.

[Friech]

Hi There,

Thank you for the credentials. The icons were not showing actually, I did go ahead and corrected the codes.

To other users who might find this thread, here’s the code.

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

instagram
<i class="x-icon x-icon-instagram" data-x-icon="&#xf16d;" ></i>

youtube
<i class="x-icon x-icon-youtube-square" data-x-icon="&#xf166;" ></i>

twitter
<i class="x-icon x-icon-twitter-square" data-x-icon="&#xf081;" ></i>

pinterest
<i class="x-icon x-icon-pinterest-square" data-x-icon="&#xf0d3;" ></i>

Hope it helps, Cheers!

[pjayd]

Hi there,

Thanks so much! They look great now. Is there a way to “hide” the highlight bar that appears over them on the navigation bar. Also, is there a way to space them closer together, without changing out the other navigation links are spaced?

Thanks,
Jordan

[Rupok]

Hi Jordan,

Thanks for writing back. Let’s use this CSS under Custom > CSS in the Customizer.

.x-navbar .desktop .x-nav > li.menu-item.menu-item-object-custom > a:hover {
  box-shadow: none;
}

Hope this helps.

[pjayd]

Unfortunately when I tried that it stopped the social links from working at all.

Is there something else we could try?

Also, can we make the social icons closer together than the rest of the navigation bar?

Thanks!

[Nico]

Hi There,

Upon checking your setup, your social links work well.

To remove the space between social icon menu:

.x-navbar .desktop .x-nav>li.menu-item-object-custom>a:not(.x-btn-navbar-woocommerce){
padding-left:10px;
padding-right:10px;
}

Let us know how it goes.

Thanks.

[pjayd]

Great that worked!! Thank you!

[Rahul]

Glad we were able to help you out!

Let us know if we can help with anything else.

Have a nice day!

[Author]

Posts