Social media icons on same line in side menu

Support
#1

Hi
I had an issue with an old child theme, and when I reinstalled it, it lost the modifications I had made to get 3 social media icons on the same menu line. Please see attached screenshot of the old website with the menu buttons.
I tried recreating this, without success. I tried searching old forum posts, and I havent been able to find the solution either. Could you please direct me where I can go for this? As it stands, I have created icons in the menu for FB and IG, but these are not appearing…

Many thanks!

#2

Hi @charleswerner,

Thanks for reaching out.

Unfortunately, I’m not sure what was customization as well plus, the structure is a bit different now. How about restoring your entire site back to when it’s still working? Then clone it as a staging (you can use All in one migration plugin like from here https://wpshout.com/quick-guides/all-in-one-wp-migration/). Cloning is the same as migration as you’re creating another copy to a different destination.

Then in your staging, you can update your site and move and fix the customization from your live site to your staging. Please note that we can’t offer any fixes or enhancement to any existing customization, it users responsibility to use and enhance it.

Thanks!

#3

Hi
Thanks for getting in touch so fast.
I think there is a simpler solution to this issue… I probably expressed myself badly! I will start again :slight_smile:

How can I get three social media icons into the equivalent of a block on 1 menu line? If I add facebook, then instagram, each takes up its own individual line, and I dont have the space- nor does this look nice.
X support was able to help me do this the last time (a couple of years ago now!)- the result of which is on the screenshot, but I haven’t been able to locate this information again.
In addition, FYI, I have added FB and IG to the menu already, but they are not appearing…

#4

Hi @charleswerner,

I checked and there are no added menu items for social icons, if it’s just hidden then it still should be viewable through source code. Would you mind providing your login credentials so I could verify if they are added? Maybe it needs just a simple float styling for icons. But, I still need to check it if it’s doable.

Thanks!

#5

Sorry- I was working on the french menu, and I hadn’t yet updated the english one… They are both the same now.

#6

Hi @charleswerner,

I see, in that case, please add this CSS

    #menu-item-1728, #menu-item-1729 {
     width: 50% !important;
     text-align: center;
    }

It’s the ID of the menu items where the social icon is present and should be viewable in browser’s inspector https://developers.google.com/web/tools/chrome-devtools/

That CSS is only applicable for the two social icons and if you’ll add more then please change its width accordingly ( 100% / item count ). Example, 100% / 4 items = 25%, hence,

    #menu-item-1728, #menu-item-1729, #menu-item-1730, #menu-item-1731 {
     width: 25% !important;
     text-align: center;
    }

And of course, you need to add the ID of the item too like above. This should serve as a guide and you’re free to enhance it. But we can’t provide further customization regarding this.

Thanks!

#7

Thanks so much for your help!
I have 1 last question: the icons are not visible, even though you can hover over and click them… See attached. What can I do about this?

Many thanks for the top support!

#8

Hello There,

Please use the correct icon code. You added this <i class="fab fa-instagram" data-x-icon.....>. The correct one should be something like: <i class="x-icon x-icon-instagram" data-x-icon.....>. Please check your icon code and test it again.

Kindly let us know how it goes.

#9

Thanks for getting back, but its not resolving the problem. I have tried all the different possible combinations, but I end up with these graphics

#10

Hi @charleswerner

I couldn’t narrow this issue down to a specific reason, however, you can add this CSS code to (Theme Options > CSS) section to show the icons:

.x-icon.x-icon-facebook-square, .x-icon.x-icon-instagram {
    font-family: "FontAwesomeBrands";
}

Thanks.

1 Like
#11

Fantastic! Thanks so much for helping to resolve this…:sweat_smile:
One final question: can I make the icons larger and reduce the spacing between the FB and IG icons so that it fits the style of the rest of the menu?

#12

Hello @charleswerner,

Thanks for asking. :slight_smile:

I suggest you to add custom Class to Facebook and Instagram menu icons from Appearance > Menus. Here’s a screencast that you can take a look.

After that add following CSS under X > Theme Options > CSS:

.icon a {
    padding: 0px 35px !important;
}

[data-x-icon], [class*="x-icon-"] {
    font-size: 140% !important;
}

You can change the class name as per your requirement.

Above changes are done using custom CSS. If you would like to explore CSS, please take a look at following resource:

https://www.w3schools.com/css/

Please note that providing support for custom codes (like CSS changes) falls outside the scope of support we can offer. In case of any issues with the layout because of custom codes we won’t be able to provide support.

I have found the proper CSS code selector using the Chrome browser Developer Toolbar:

https://www.youtube.com/watch?v=wcFnnxfA70g

For the CSS code itself, I suggest that you get started with this tutorial:

https://www.youtube.com/watch?v=yfoY53QXEnI

Thanks.

#13

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