Shortcode for Simple Social Icons

[sdbroker]

Hello,

Is there a short code for the "Simple Social Icons" plugin? I'd like to add them on the above the header menu bar within a text widget side by side to the rest of the menu items. If I add the plugin the icons, they show below the rest of the other menu items.

Anyone knows how this can be fixed?

Thank you!

[Sridhar Katakam]

Can you provide the URL of your site?

---

Genesis Tutorials | Follow me on Twitter

[sdbroker]

Hi Sridhar,

Here's my site: http://www.alexiourealty.com but I moved the social icons from the header menu to the footer since the plug in puts them either above or below the rest of the top menu.

BTW - I found a way to implement your "pages instead of posts" on agency concept article on the minimum theme and works like a charm. 🙂 Thank you for that!

[Sridhar Katakam]

It is possible to add a widget area at the left or right side of any of the three navigation menus in Genesis.

Here's an example: http://sridharkatakam.com/how-to-add-a-widgeted-area-in-navigation-bar-in-genesis/

---

Genesis Tutorials | Follow me on Twitter

[sdbroker]

Hi Sridhar,

That won't work because I'm using the custom menu to the "Header Right" widget. The menu just above that custom menu is just a text widget that I placed on the same Header Right" box and it displays just above the header menu as a top menu. I want to use a couple social icons from the Social Icons plugin to be placed on the right of that "text" top-menu. I believe a shortcode to call those icons will do the job. Dropping the plugin on that same "Header Right" box, puts the icons either above that "text" top menu if I have them aligned right or puts them almost next to the logo if I have them align center or left...

[Sridhar Katakam]

Dropping the plugin on that same “Header Right” box, puts the icons either above that “text” top menu if I have them aligned right or puts them almost next to the logo if I have them align center or left…

Can you do that and post back? It might be possible to use CSS to put them in one line.

---

Genesis Tutorials | Follow me on Twitter

[sdbroker]

Ok, I dropped the plugin on the "header Right" box, aligned hem right and they now appear on the top right above that "text" menu. I'm trying to have them on the same line to the right of the "text" menu.
Another way that I think it could work, is to add the links to the same text widget and then somehow to have those simple icon fonts called up to the link...

[Sridhar Katakam]

Add the following at the end of child theme's style.css:

#simple-social-icons-3 {
    float: right;
}

.site-header .widget-area {
    margin-top: 2rem;
}

.simple-social-icons ul li {
    margin-bottom: 0 !important;
}

---

Genesis Tutorials | Follow me on Twitter

[sdbroker]

Hi Sridhar,

I added it and nothing changed. I believe that it'll only work correct if somehow either the plugin (through a shortcode) or its fonts (as the title of a link) gets called from within the text widget on that menu. 🙁

[Sridhar Katakam]

There are errors in your style.css that needs to be fixed. As a simple test, add

body {
    display: none;
}

at the end and save it. Now when you refresh any page of your site, nothing should appear but everything does. It means, there are show-stopper errors which you might want to definitely fix. These are preventing any new style rules placed at the bottom from working.

---

Genesis Tutorials | Follow me on Twitter

[sdbroker]

You're right! After placing it at the end everything still appears. I changed themes momentarily and put it on the new theme and nothing appeared. Thank you so much for finding this!

Could you please give me an example of what a "show-stopper" error is, so I know what to look for?

Thank you again for finding this issue!

[sdbroker]

I think I found the location of that "show-stopper" error within my plugin's override css by moving up that

body {
    display: none;
}

until I found the location... Thank you!

[Sridhar Katakam]

A few examples:

In

.site-tagline {
	background-color: #rgba(0, 0, 0, 0.6);
	border-bottom: 1px solid #eee;
	box-shadow: 0 10px 30px #000000;
	margin-top: 60px;
	margin-top: 6rem;
	padding: 40px 0;
	padding: 4rem 0;
}

it should be

background-color: rgba(0, 0, 0, 0.6);

//**
Home Communities section (Use Genesis Featured Pages widget)
---------------------------------------------------------------------------------------------------- /

should be

/**
Home Communities section (Use Genesis Featured Pages widget)
---------------------------------------------------------------------------------------------------- /

http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fwww.alexiourealty.com%2F&profile=css3&usermedium=all&warning=1&vextwarning=&lang=en should give you more clues.

---

Genesis Tutorials | Follow me on Twitter

[sdbroker]

I found a closing "}" missing from one of he plugin's Media rules which fixed the "show-stopper" error! 🙂 I'll have to look at other ones that you pinpoint!

Now the Simple Icons appear next to the "text" top menu, as you said! You are a GENIUS!

After the Simple Icons got to the right of that text menu, there's a lot of empty space on the header between the "Custom Menu" and the top "text & icons" menu. Is that because of the Icon circles?

Thank you so much!

[Sridhar Katakam]

.simple-social-icons ul li {
    margin-bottom: 0 !important;
}

is supposed to take care of that but looks that it is not working because !important is coming from the plugin itself.

Try changing that to

.simple-social-icons ul li {
    margin-bottom: 0 !important;
    height: 15px;
}

If you are not happy with the results, you might want to just use icon fonts.

---

Genesis Tutorials | Follow me on Twitter

[sdbroker]

Ok! I changed both the height on the ul li and margin-top on the widget-area above that to:

.site-header .widget-area {
    margin-top: 0.2rem;
}

.simple-social-icons ul li {
    margin-bottom: 0 !important;
	height: 10px;
}

and it now looks GREAT! Thank you so much I'm happy with it now!

If you don't mind a code question regarding the widget placement on front page. What's the CORRECT hook to place the home page widgets AFTER the home-featured widget:
genesis_before_content_sidebar_wrap, genesis_before_content or something else?

I have all of them that follow the theme's standard "home-featured" in genesis_before_content_sidebar_wrap. Is this ok?

Thank you so much again for all your help!

[Author]

Posts