Moving social icons out of .navbar-inner

Sounds like you’d understand the Hooks API. You can move the Tagline using it.

I’ve actually been working with the Hooks API since last night without satisfactory results. The piece I’m obviously trying to transform is “social-block” since it’s nested inside a few of the nav classes. While I have been able to hook in and change the span class, changing “social-block” and moving it above the logo and navigation has been the challenge.

What I’m looking for is a means of modifying the action that places tc_social_in_header into the navbar so it can be moved above the block for the logo and nav. I’m not seeing anything like that in the function reference…

Thoughts?

Just a quick update with the fruits of my efforts thus far today –

After pouring through the function reference I was finally able to mostly remove the function in the parent theme, but in bringing it back (even as a “new” function in my child theme) none of the icons show up in the UI. What’s more is that even after removing the function/action as well as the filter, “social-block” still renders in “navbar-inner” so my effort was moot.

Last piece I tried was to recreate the “class-header-header-main.php” file and manually change where “tc_social_in_header” was being called. This produced no results.

Is there perhaps another set of functions that I’m missing? The client really doesn’t like the view of the social icons nested inside the navigation (with our branding and flow, it is a little messy), hence the ask and the effort thus far. The ability to better specify where the social icons land is really the only detractor to this theme so far. Working with it has otherwise been brilliant, so my hope is that there is a fix and that I don’t have to retread and recreate my efforts inside a different theme (thereby producing several unbillable hours).

Any chance you could do it with CSS that repositions and styles it? Maybe as temporary solution?

I’ll flag to Nic anyway for advice on the Hook.

I have attempted just about everything under the sun with the CSS and nothing works. The issue again is that this function is buried in the following classes: navbar -> navbar-inner -> row-fluid -> social-block. Given that this dynamically generated div is three levels below the parent, moving it via CSS alone isn’t really viable. I additionally tried to hand code the HTML for my icons, but there doesn’t seem to be a place inside the header.php file where I can insert said code that doesn’t ultimately break the desktop theme or the responsive bits.

Let me know when you can what Nic comes up with. It’s really a shame that the social icon display wasn’t made into a widget with more options of placement. More so the heavy lifting to insert new icons (or just modifying the existing ones) as opposed to the “canned” versions that are part and parcel with the theme.

We have a low CTR on the icons for these sites regardless, so the before mentioned wish to place them above the nav is right now a nice to have rather than a deal breaker. This is, however something I will need to dial in before the end of the month.

3.2.1 has been released today, with a load of new features. Not sure if it will help you, but the Snippets will need to be reviewed now.

Don’t see why CSS wouldn’t fix:

/* Header Social Icons */
.navbar-inner .social-block {
position: relative;
top: 0px; /* Adjust */
left: 0% /* Adjust */
}

Thanks very much for the reply, and I’ll keep my eyes peeled for the update. It hasn’t come through as of yet. I greatly appreciate the CSS suggestion as well. It’s sadly something I’ve already tried and doesn’t move the div in question at all (even after playing with the z-index). I’ve additionally inserted “.row-fluid” into a similar attempt with the same results – .social-block remains nested in the nav.

3.2.1

Howdy,

Thanks again for the reply. I’m now running with 3.2.1 and I don’t think it’s at all production ready as there are a number of bugs (i.e. when the header is made “sticky” the feature to shrink the logo and tag line actually expands them, and the menu disappears irregularly). I can outline those issues in a separate post, but the function I’m looking for to take the social icons out of the navbar and place them elsewhere does not exist in this iteration of the theme.

My solution yesterday was to create a widget and give it a value of “__before_header”. Where this was working perfectly prior to upgrading to 3.2.1, the widget now appears below the navigation and above the slider. Fiddling with the CSS to reset the display unfortunately does not work. Did something happen with the “__before_header” hook? Is there a plan to provide greater flexibility with the placement of social icons?