In my previous post on this topic, I showed how a widget area can be added after the last list item in nav bar followed by populating this widget area with Social Media Widget plugin's widget for showing social media icons.
A couple of blog readers wrote that they are having difficulty in making it work with Simple Social Icons and Dynamik and Beautiful Genesis child themes.
In this article I provide the necessary code to display simple social icons floated to the right in Primary navigation bar in three themes. Needless to say, this works with any Genesis child theme with minor CSS adjustments.
Screenshot of sample HTML output:
Use the following PHP code regardless of which child theme is active.
[…] Update on Sunday, December 29, 2013: See http://www.sridharkatakam.com/adding-simple-social-icons-navigation-bar-genesis/ […]
[…] Adding Simple Social Icons to Navigation bar in Genesis […]
Do you know how to:
1) Increase the spacing between the icons in Dynamik Website Builder Gensis?
2) Get the icons to display in two rows in DWB Genesis?
Thanks!!!
Can you provide the URL of your site?
sure! it’s under construction but i deactivated the ultimate coming soon plugin so you can take a look. it’s in the sidebar widget area – http://www.yaelsteren.com/contact/ – you can see that they are all squeezed very closely instead of spacing out correctly. thanks so much!
Try this CSS:
#simple-social-icons-2 ul li {
margin-left: 12px !important;
margin-right: 12px !important;
}
That worked!!! Thanks so much for all of your help and Happy New Year!!!
You are welcome. Wish you a happy new year too.
Thank you for this tutorial. The instructions for Beautiful worked perfectly for Pretty Pictures, too.
Is there a way to reduce the space between the icons so that they are still to the right but closer together?
Thanks!
Yes. We can write CSS for it. Can you provide the URL of your site?
Fabulous! It’s http://www.shellibourque.com
Add this CSS:
.menu-primary .simple-social-icons ul li a {
margin-right: 0;
}
.menu-primary .simple-social-icons ul li:last-child {
margin-right: 0 !important;
}
That’s perfect! Thank you SO much. I have been wanting to add these icons for months and could not figure it out. I’m so glad Brian Gardner mentioned you in tweet yesterday. He was spot on about how you!
Hello! Thank you for writing so many amazing tutorials!
I’m currently helping a friend with her blog and this is exactly what we want to do – though I can’t seem to make it work. The site is currently on under construction mode as I made edits but I can change that if you need to see it. This is probably a silly question, but do I need to fill in ‘theme_location’ as well? If so, where do I find what to put here?
I’ve made the new social nav menu like you explained previously, added the PHP from this post, filled it in to match my theme (replaced ‘your-theme-slug’ with mine and also checked that the widget area matches), and added the simple social icons to the section. I’m not sure what I’ve left out other than customizing that ‘theme_location’.
Thank you so much for your help!!!
Whitney
You do not change “theme_location”.
If you want me to take a look inside to what’s wrong and fix the issue, send me your WP and FTP login via http://www.sridharkatakam.com/contact/.
I know this should work for the sub nav area too but not sure how?
Do I simply change nav to sub nav?
Thank you
Thank you so much for your tutorial. I am getting some weird styling though, do you mind having a look? http://bit.ly/1mskcpr I’d like to get rid of the space above so the menu and icons are in one line.
Try replacing
return $menu . $social;
with
http://pastebin.com/raw.php?i=EMEvAspp
and add this in style.css:
.genesis-nav-menu > .right {
padding-top: 0;
padding-bottom: 0;
}
Thank you for your fast reply. That doesnt seem to have worked!
If you would like me to take a look inside and try fixing it, send me your WP and FTP login info via http://www.sridharkatakam.com/contact/
Is the php code above all I would need to create a new sidebar widget area? I read your previous post but would like to add the new sidebar without using the plugin.
Yes.
Hi Sridhar, wonderful tutorial and I’ve now got the social icons in my navbar, right, but I seem to have styling issues as my navbar has no almost doubled in height and the icons are elongated vertically as well. What do I need to style / add etc to the CSS to make my navbar stay correct, original height. My icons are set at 30px, border radius 3px in the Simple Social widget box.
Any ideas? Thanks. My site is in localdev so not visible, but it’s basically that elongated issue!
Need to see the site live to offer any advice.
Thanks Sridhar, no worries. I’ve decided to put social icons in the utility bar up top so will avoid the problem. Utility bar functioning properly is another coding issue though! Do you have a post on that too by chance?
I have a couple of posts on how to make Utility bar fixed to the top as the user scrolls down.
Using dynamik and cannot get the ‘Nav Social Menu’ widget displayed in the widget area. I am using ‘dynamik-gen’ as the theme slug. Any advise would be appreciated. Thanks.
Do you have to have Genesis Simple Sidebar active as a prerequisite for directions on this post? I went to the previous one and was able to get it working.
Nope.
Hey Scott, make sure you have ‘affect admin’ ticked as this needs to make changes to the admin.
Great work, thanks Sridhar
THANK YOU, Cath!
I’d been through this tutorial several times and just could not figure out what I’d done wrong. Facepalm.
help! I just tried to add the PHP code to the functions file and now it all came crashing down and all I see when I got to my blog is the following:
Fatal error: Cannot redeclare sws_social_icons() (previously declared in /home/unlikely/public_html/wp-content/themes/magazine-pro/functions.php:64) in /home/unlikely/public_html/wp-content/themes/magazine-pro/functions.php on line 90
What do I do?
Just want to say thanks for all the great information on your web site. It’s a been a huge help.
You are the man!
Do you know how I could get them to be responsive though on mobile?
http://www.thirdandbeer.com (this is a development site at the moment)
Add
@media only screen and (max-width: 568px) {
section#simple-social-icons-3.widget.simple-social-icons {
margin: 0 auto;
display: table;
float: none;
}
}
Hi! Could you please help? I followed your instructions exactly but I’m still having problems. The icons are showing up, thankfully, but they’re below my nav bar. Can you tell me how to get them to line up with the rest of the primary menu? Site is http://JoshuaTrent.com
Hi again, never mind. I don’t know what I did but it went to the right place so I’m just going to leave it alone, lol! Thanks again for the instructions!
Thank you for these instructions — I have been looking for a solution to this for a long time! However, I am having a slight problem. The problem is that the simple social icons are below my top menu — not on the same line as the top menu. Can you suggest a fix for me? I greatly appreciate the work that you do to help those of us that aren’t as knowledgable in this arena!
My blog is http://www.mydreamsofdisney.com.
Thanks!
Mike
Follow http://www.sridharkatakam.com/adding-search-form-simple-social-icons-primary-navigation-genesis/
[…] the comments section of my Adding Simple Social Icons to Navigation bar in Genesis article, Mike […]
Thanks so much for this Sridhar! This works beautifully!
How would you change this to make it work in header right. I can’t seem to figure it out. Thanks for any help you are able to provide!
This is great, thank you! I just added it to my site and it worked great, except, the icons aren’t working in the header. They work fine in the sidebar. Would that be a plugin conflict? Here’s the site: http://brookesamplesite2.smittenclients.com/
Hi Sridhar I just want to align the icons horizontally, because by default it is order vertically, how can I do that? http://www.gosynergy.org/ Thank you!
What if I wanted to add Simple Social Icons to the secondary nav menu in the Outreach pro theme. Right now this is the best place for my needs.
Hi Mike
You will need Menu Social Icons plugin
follow this tutorial: http://www.sridharkatakam.com/adding-social-icons-navigation-using-menu-social-icons-plugin/
Hello! I’m using the Runway theme on my test site here: http://mystylevita.southernblogsociety.com/?p=1.
I added the code for the secondary menu so my social icons show up when the sticky second menu engages (same menu but just the location is secondary instead of primary) and it works beautifully! However, I was wondering if it’s possible to make the PHP so that the social icons show up on both the primary and secondary menu? That way they dont randomly show up on the secondary menu when a visitor starts scrolling.
I know nothing of PHP code so I sincerely appreciate your help & wonderful tutorials!
Thank you!
Whitney
How do you control how far right the icons float in the navbar?
Figured this out. Just added:
margin-right: 20px;
Thanks!
Hi Sridhar!!! The code you provide for the Simple Social Icons added to the nav bar is PERFECT! Do you have a code for adding it to the Secondary Nav Menu instead of the Primary one?
Thanks!
Sharon
Just replace primary with secondary in the PHP code.
Great tutorial, but how do I get them to show up in the secondary menu? I used the studiopress tutorial to have that menu at the top of the screen, but I can’t get the social icons on it.
You can do it by changing the Primary to Secondary 🙂
Hello Sridhar,
I followed sort of same tut by Bill Erickson, for adding items to Genesis Nav, but it didn’t work. Your seems to be using one different thing – ob_start and ob_get_clean.
Can you please explain the significance of these two in your code. Thanks.
Here’s some info about the output buffering:
http://php.net/manual/en/intro.outcontrol.php
http://php.net/manual/en/book.outcontrol.php
In general, it is to be avoided when possible. Think of it like the negative margin of CSS.
Hmmm, I followed your directions for Genesis/Dynamik Website Builder but the “nav social icons” widget never appeared. I put exactly the right code in both Dynamik’s “functions” area and the proper CSS in the right place too.
I’ll gladly provide an admin login for you if you can peek into the back-end of the website.
I can’t wait to get this working as it is exactly what I need on this particular site – a Facebook button inside the nav just to the right of the standard nav menu items.
Can you provide the URL of your site? I have just tested this code and it’s working fine in Dynamik.
Note that the social icons widget is supposed to appear in the WordPress menu that’s assigned to the Primary Navigation Menu location, not in other places like a Nav menu widget placed in Header Right widget area.
Hi Sridhar,
I have exactly the same problem as above…the “nav social icons” widget hasn’t appeared after adding the PHP to the custom functions area.
http://www.zelky.com.au/gen_dyn/
It is there now. I had to tick the Custom Functions (Affect Admin) box and save again.
I’m sorry Sridhar, I assumed you knew my website URL was linked to my name (I entered it into the “website” field on this form). It is http://www.jasondavis.com/liprip/ The site is not live yet.
However, I did get it to work when I followed Zelky’s lead and checked “Affect Admin” in Genesis Custom>Functions.
Unfortunately as the Cobalt Apps documentation warns below, I am not confident in my coding skills and I’m not comfortable leaving the box checked. I’ll wait until I’m done with the site and then put this into effect as a last step when I have no other functions to add. Thanks for everything, as always!
Oops – I meant to include this quote I referenced from Cobalt Apps earlier:
“By default the Custom Functions you add below will only affect the front-end of your site to help prevent accidentally “breaking” your website with some bad code. But if you’re confident in your coding abilities you can check this box to have your functions affect the Dashboard area (back-end admin section) as well. “
I was playing with this setting yesterday and noticed that social media widget continued to appear after unchecking it. So you might want to try it out.
Ah yes. After adding it, I can uncheck “affect admin” in Dynamik Custom>Functions and the widget area remains, though I can’t administrate it unless I recheck the box. It disappears from Appearance>Widgets page when it is unchecked, but that is fine. Now I just need to figure out how to position the icon(s) to the right of the right-most nav menu button, as if it was a continuation to the right of the nav menu… and why my nav menu doubled in height with the addition of the nav social widget area. Hmmm…
http://sridharkatakam.com/adding-simple-social-icons-navigation-bar-genesis/#comment-355480
Now I’ll have to figure out how to adjust the CSS to get the Facebook icon (I’m only using that one icon in the menu) to be just to the right of the navigation menu, which was also made much taller than it was before the social icons widget appeared in the nav. Wish me luck!
http://www.jasondavis.com/liprip/
Try changing http://pastebin.com/raw.php?i=hw7u6DMc to http://pastebin.com/raw.php?i=vEMm5JbM
Yael, the Gravity Forms plugin on your contact page is disabled. We currently see the short code when visiting the contact page.
Thanks so much Jason! I have no clue how the plugin got deactivated! i really appreciate you letting me know! all the best, yael
You are the best. Thanks as always!
Good evening. First of all, thanks for your time and for this post. It is helpful. My problem in http://www.lahotelista.net/labellezaesrentable is that I can’t put the Icons in the same line of the resto of menu. Even if I remove the little line or I transform the icons in square format. Always they keep below primary menu (Nos inspiramos, El paseo de los lunes, Huéspedes, Nuestras listas, huphotels…
Could you help me, please.
My theme is swank child.
Thanks a lot!!
How can I have this work for both the primary and secondary nav?
In the code added in functions.php, try deleting http://pastebin.com/raw/fjvyndV2.
I tried implementing this in Digital Pro, but I’m having trouble getting the search and icons to line up with the primary navigation menu (right now, it’s directly underneath it). Can you assist? For reference, it’s here: http://seventh-row.com.
Thanks so much!
Hi Sridhar,
I am having a weird issue with this in Infinity Pro. I can see in the page source code that it’s working, it inserts the proper and other code, however it is not visible. I triple checked all CSS and there is nothing that should prevent it from displaying, yet it’s not showing up.
Unfortunately the site is local only, not on a live server yet, otherwise I would share the URL.
Do you have any thoughts? Or can you try it on Infinity Pro?
I’m using WP 4.6.1 and latest Genesis.
Thanks!
Rob
I’ll give it a try tomorrow and post an update.
Hi Sridhar,
I’ve been trying to get my search bar and social icons to line up with my menu but if I use CSS to move them up (transform:translate), they get hidden beneath my menu. The fact that it’s lower also seems to be hiding part of my main page, which is causing formatting problems throughout. Can you assist?
You can view it here: http://seventh-row.com.
Thanks so much for your help!
Best,
Alex
Never mind! Figured it out.
I love this tutorial and have it working well. But I was wondering if there was a way to keep the social icons always showing even on mobile (versus having the user click the mobile menu icon to see them). So still have the hamburger icon for the menu items, but have the widget contents showing below even when the responsive menu is closed?
I’m using the Altitude Pro latest version theme.
Thank you!
Yes. Follow https://sridharkatakam.com/add-simple-social-icons-altitude-pros-header/ instead of this.
Sridhar – Thank you so much! This works perfectly and was just what I was hoping for. I appreciate it! 🙂
[…] the comments section of Adding Simple Social Icons to Navigation bar in Genesis, a user […]