Topic: Social icons on Nav Bar

Tagged: x

Author

Posts
February 20, 2017 at 9:07 am #1378239

Spammedout
Participant

Hi, I’d like to my social icons on the Nav Bar and control their position. I followed this thread https://community.theme.co/forums/topic/navigation-bar-and-social-icons/ and created the file _navbar.php in x-child-renew/framework/views/global/ but I still don’t see the social icons in the Nav Bar. Please advise. Thanks

February 20, 2017 at 9:24 am #1378271

Spammedout
Participant

My theme is Integrity so I created the .php file in the Integrity file of course.

February 20, 2017 at 9:45 am #1378323

Rupok
Member

Hi there,

Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

February 20, 2017 at 10:11 am #1378345

Spammedout
Participant

This reply has been marked as private.

February 20, 2017 at 11:07 am #1378419

Rupok
Member

Hi there,

You should follow the thread and use the code as is since it should go under global folder.

Thanks!

February 20, 2017 at 11:47 am #1378488

Spammedout
Participant

Hi, can you spell that out a little more clearly please? What exact folder? So far it doesn’t work. I’ve given you access to the backend of my site. Thanks

February 20, 2017 at 12:14 pm #1378523

Joao
Moderator

Hi There,

Would you mind to provide a mockup of how you imagine your social icons on your navbar?

I dont think so template changes are necessary.

You could simply create on your Menu some Custom Links on Appereance > Menus and add the icons as the labels of your custom links.

For example, for facebook, add as a label : 

and link to your facebook page.

Let us know your thoughts.

Thanks

Joao

February 20, 2017 at 12:42 pm #1378567

Spammedout
Participant

Hi Joao, that’s fine thanks! How do I change the size and color of the icon that appears on the menu?

February 20, 2017 at 1:37 pm #1378626
Joao
Moderator
Hi There,

Please add the following code to Appereance Customizer Custom CSS
```
.x-navbar .desktop .x-nav>li i.x-icon-facebook-square {
 font-size: 25px;
 color: blue;
 margin-top: -4px;
 
}
.x-navbar .desktop .x-nav>li i.x-icon-facebook-square:hover {
 
 color: red;
}
```
Let us know if you need further assistance.

Joao
February 20, 2017 at 4:19 pm #1378839

Spammedout
Participant

Hi Joao, when I change “facebook-square” to “twitter-square” I get another facebook icon. I need twitter, utube, instagram and snapchat links. Thanks

February 20, 2017 at 10:36 pm #1379221
Friech
Moderator
Hi There,

Here are some social media icon codes.

facebook


instagram


youtube


twitter


pinterest


snapchat


Then update the CSS code Joao’s provided above to this:
```
.x-navbar .desktop .x-nav>li i.x-icon {
 font-size: 25px;
 color: blue;
 margin-top: -4px;
 
}
.x-navbar .desktop .x-nav>li i.x-icon:hover {

 color: red;
}
```
Hope it helps, Cheers!
February 22, 2017 at 4:33 pm #1381929

Spammedout
Participant

Hi Friech, Many thanks, worked perfectly! You guys are the ultimate!

February 22, 2017 at 9:23 pm #1382283

Friech
Moderator

We’re delighted to assist you with this.

Cheers!
Author

Posts

<script> jQuery(function($){ $("#no-reply-1378239 .bbp-template-notice, .bbp-no-topic .bbp-template-notice").removeClass('bbp-template-notice'); }); </script>