Docs

[Andrew]

http://127.0.0.1:4001/wordpress/
X 4.5.2; WP 4.5.2; CS 1.2.4

Hi,

On April 29, 2015, (#261236) a few support members helped a forum member customize their navbar to display social icons by editing the _navbar.php file in the x-child theme. The solution worked perfectly.

The social icons in the solution were links to various social sites implemented like this;

• <i class=”x-icon-facebook” data-x-icon=””></i>
• <i class=”x-icon-twitter” data-x-icon=””></i>
• <i class=”x-icon-linkedin” data-x-icon=””></i>

I need to have the link icons’ functionality changed to share icons – just as they would be if using X’s social share shortcodes. I could not find a way to insert social shortcodes into the structure.

Could you help?

Cheers!

Andrew
(Although I’ve given my URL above, it’s on a localhost and probably unreachable – sorry.)

[Rue Nel]

Hello Andrew,

Thanks for writing in! Could please share the url of the topic of your reference? For the meantime, you can always edit your _navbar.php and insert a social share shortcode by adding a code like this:

<?php echo do_shortcode('[x_share title="Share this Post" share_title="" facebook="true" twitter="true" google_plus="true" linkedin="true" pinterest="true" reddit="true" email="true" email_subject="Hey, thought you might enjoy this! Check it out when you have a chance:"]'); ?>

Hope this helps. Please let us know how it goes.

[Andrew]

Hi Rue!

Thanks for the code and input.

This is the link with the navbar/social icons solution I referenced;

https://community.theme.co/forums/topic/social-icons-to-the-right-of-navbar-menu/

I implemented this solution, and the only change I wanted to make was having SHARE icons as opposed to social LINK icons. Your code snippet worked, but because of not being up to speed with PHP, I arbitrarily inserted the code which was messy.

The previous solution also provided the accompanying CSS which I’ll need to style the icons and integrate them with the navbar.

Hope you can help.

Cheers!

Andrew

[Rad]

Hi Andrew,

I like to clarify first, you wish to achieve sharing functionality on the navbar instead of just social links? Is that right?

Thanks!

[Andrew]

Hey Rad!

Thanks for coming back to me.

Yes, I do want to incorporate the Share social icons in my navbar. I’ve attached an image of how it currently looks with Rue Nel’s <?php echo do_shortcode solution. The functionality is there, but I still need to do some styling (getting rid of the background of the icons, and the faint line below them). I have global styling for the social icons on my pages, but this does not target those in the navbar.

In the attachment you’ll see what I currently have, and what I’m aiming for as a final implementation.

Trusting you can help,

Cheers!

Andrew

[Andrew]

Hi Rad,

My apologies, I forgot the image attachment in the previous post.

Cheers!

Andrew

[Nabeel A]

Hi there,

Thanks for providing the screenshot, this can be fixed with custom CSS, can you please try uploading the site on live environment so we can suggest a tailored solution? In the mean time try adding the following code in your Customizer:

.x-share-options {
    margin-top: -40px !important;
}

Adjust the margin accordingly. Let us know how this goes!

[Andrew]

Hi Nabeel,

Thanks for the CSS and the response.

Unfortunately I don’t have a live environment yet, so I’ve attached another JPG of where I currently am.

The CSS you gave was for a global implementation, and I saw in a previous solution (see above), the social share icons in the navbar were given a different class. I added your CSS under that class that only targeted the navbar icons and not the icons globally.

I’m just about there with the exception of spacing. The social icons in the navbar (see attached image), have a thin line below them, and I assume some padding/margin below the line. This causes the icons to expand the navbar to accommodate them. I need to take out this extra decoration and any other padding below the icons.

Trust you can help,

Andrew

[Joao]

Hi There,

To get rid of the lines under your social icons you need to use a CSS like this

.theclassgiven {
text-decoration: none !important;
}

To help assist with the issue, you also could click with the right button of your mouse over those social icons, inspect it, and provide us a screenshot so we can see what is happening.

Hope it helps,

Joao

[Andrew]

Hi Joao,

Thanks for getting back to me.

I’ve attached the Inspector screenshot as requested, and have included the _navbar.php file from the x-child theme directory which I hope will help you to assist me.

Overall we’re very close.

Cheers!

Andrew

[Andrew]

Hi Joao,

I see the _navbar.php file did not upload. I’ve renamed it and am trying again.

Cheers!

Andrew

[Andrew]

Hi again,

I see that didn’t work either.

Let me try again.

Cheers!

Andrew

[Andrew]

Hi some more!

This should work – it’s a JPG file

Cheers!

Andrew

[Jade]

Hi Andrew,

Kindly try this code:

.social_by_nav a {
    text-decoration: none !important;
}

Hope this helps.

[Andrew]

Hi Jade,

Thanks for the code, but unfortunately it did not have the effect we wanted. I’ve added the current CSS for the navbar social sharing icons below hoping it will allow you to assist.

The only issue with the icons is the thin line above and below the icons.

————————

.social_by_nav a {
text-decoration: none !important;
}

.social_by_nav {
float: right;
margin-top: -25px !important;
top: 0;
position: relative;
display:inline-block;
text-align: center;
text-decoration: none !important;

}

.social_by_nav .x-share:hover {
background-color: transparent;
color: #00123b;
}

.social_by_nav:first-child:before{
content: “Share”;
font-size: 10px;
position: absolute;
left: -25px;
top: 34px;
display: inline-block;
}

—————–

Cheers!

Andrew

[Author]

Posts