Customising Social Icons in Topbar and Bottom Footer

Support
#1

I have customised the top bar social icons on this site:

To do this I needed to edit the functions.php file, and remove any social icons from the customisers > social so they don’t come up in the same place a the flags.

I’d like to include social icons in the footer only, as they are displayed in the footer of a similar site we have https://www.evergreen-alpineacademy.com/

Is it possible to include Social Icons in the footer only, and still have the customised topbar section?

#2

Hi There @freedomdesign

Thanks for writing in! You can add the following CSS rule into your Theme Options > Global CSS area to remove scial icons from your topbar, so you can add customized icons there.

.x-topbar .x-social-global {
    display: none;
}

Hope that helps.

#3

Hi,

The problem is, I’ve customised the social-global top bar so if I do this none of the flags show.

What I hope to do is be able to choose which icons show in the top bar, so I can only show the ones I’ve selected, and then have a different selection for the bottom.

  • in the top I want to show the flags
  • at bottom I want to show Facbook, Youtube etc

Or is there a way to insert code into the footer to show some social icons above the Footer menu?

Or should I change the way I’ve done this - add the flags to the topbar rather than have in the social icons?

#4

Hi There,

Thank you for the clarification, I suspect you edited the x_social_global() function to show flags instead of social icons on the topbar (but ends up affecting footer as well)

I advise that you remove the modified x_social_global() on your child theme, this will revise back the x_social_global() to its original purpose.

Then write your own function on the child theme to output the flags link, you can copy the x_social_global() as your template, but give it a different name like my_topbar_flags(), you can actually copy your current flags HTML markup on that custom function.

Then navigate to this directory: \wp-content\themes\x\framework\legacy\cranium\headers\views\global

Copy the file _topbar.php to your child theme (same path, create the folder if it does not exist), open/edit that pasted file, look for the line <?php x_social_global(); ?> and replace that with <?php my_topbar_flags(); ?>

So now the topbar will output your flags (the function you wrote) instead of the social icons. Not affecting the footer, because on the footer you still have the <?php x_social_global(); ?> which serves its original purpose

Please do that via FTP so if you made a mistake you can correct it immediately.

The flags may look untidy at first, but you can style and position that with CSS, you can inspect your site using Chrome’s developer tools to see the styling that is applied to an element and then using custom CSS to override it. You can find more info on how to check for CSS selectors here. Then information about writing your custom CSS here.

Let us know how it goes,
Cheers!

#5

Wow, thanks for the detail - that is exactly what I want and need.

You guys are awesome!!! Thanks @friech

#6

You’re welcome. Glad we could help.

#7

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