Align social icons at the top next to menu names

Activello
1

How do I get my social icons to show at the top next to my menu names instead of in my footer

2

Hi @tanisha,

Thank you for your question.

You can try achieving this by creating a new widget area using the following plugin and add the activello Social Widget plugin in that created sidebar.

The above plugin will provide shortcode for the created sidebar that you can use either in the header.php file of your child theme or use the shortcode in your menu by using the below plugin.

Best Regards,
Movin

3

Thank you for your help :slight_smile: I uploaded both plugins.

The first screenshot shows my new custom widget which I named Header Social Icons.
The second screenshot shows my short code menu
The 3rd shows my shortcode menu in the customizer
The 4&5th shows my header.

Can you please tell me what I missed because the social icons are still not showing in the header.

4

Hi @tanisha,

I have tested it on my test site and found the following plugin is not working on my test site with the latest version of WordPress.

So instead of using the above plugin, please use the attached small plugin specially developed for you.

Also to hide the title of displayed social widget in the header, you can add the following CSS code in the Custom CSS option of your theme on the below path.

Admin Area -> Appearance -> Customize -> Activello Options -> Other -> Custom CSS

#masthead #header-social-icons h3.widgettitle {
    display: none;
}

Best Regards,
Movin

5

Thank you Movin! That works :slight_smile: Do I get the icons to line up with the heading What’s NEW, Beauty & Fashion and Lifestyle?

6

You can align them by using the following CSS code.

#masthead #header-social-icons .social-icons {
    margin-bottom: 0;
}

#masthead #header-social-icons .widget #social ul li{
  margin: 25px 5px 0 0;
  padding-bottom: 0;
}
7

HI Movin :slight_smile: I feel like we’re friends now LOL

I used the above code and it’s still a line above the menu names.

8

Hi @tanisha,

It’s working fine on my test site using provided CSS code.

I visited your site to troubleshoot it but it’s displaying the message “Coming Soon in 2016” and i couldn’t access it.

Could you please share me your site log in details privately by checking the option “Set as private reply” when replying here so that i can troubleshoot it?

Regards,
Movin

9

tanishacherry.com/login
username: admin
password: MovinHelpMe911

Thank you so much :slight_smile:

10

Thank you for sharing the site details.

Please use the following CSS code which will work fine for you.

section#header-social-icons {
    margin-top: 30px;
}
11

You’re the best! What are the 3 grey lines that show up underneath the social media icons.

12

You are most welcome here :

I tried to check the 3 grey lines underneath the social media icons on your site but it seems you have changed the shared site login details so i couldn’t check it.

13

Hi movin please try again
Login admin
Password MovinHelpMe911

14

Thank you for making the site login details work again.

Please use the following CSS code to remove the 3 grey lines that show up underneath the social media icons.

#header-social-icons li {
    padding: 0;
    border: 0;
}
15

Hi Movim,

I see that you are very up to date and versed when it comes to the colorlib themes. I would appreciate your help with some things if i could with a website i am helping a friend build.

There are 2 things at this stage. I am trying to get the above working and its not working. I also wish to add a social media icon set in my main menu.

Secondly i also wish to remove the line between the slider and the main menu just above the slider.

Can you help please.

the website is ellaessiphotography.com.au/wp

Thanks,

Suheil

16

Hi Suheil,

To help us keep support thread separates could you please create your own thread for your question here https://colorlibsupport.com/c/activello/ instead of replying on others thread as it makes the thread messy and hard to read.

If you want to you can also add reference of this thread in your newly created thread.

We would be more than happy to help you on your new thread.

Cheers,
Movin

17

Hello! I was attempting to follow the directions to add social icons to my header, and I’m also having troubles getting the icons to line up with the menu and to get rid of the text “shortcode”. I’ve attached a screenshot. Thank you in advance!!

18

@danikaschultz As said previously in this topic to help us keep support thread separates could you please create your own thread for your question here https://colorlibsupport.com/c/activello/ instead of replying on others thread as it makes the thread messy and hard to read.

If you want to you can also add reference of this thread in your newly created thread.

We would be more than happy to help you on your new thread.