[Resolved] SOCIAL NETWORKS BUTTONS ON NAV MENU BAR

[Carlos]

How can I get the social networks buttons on my navigation bar menu like generatepress.com ?? thanks

[Dee Broughton]

There’s a discussion of this here
http://www.generatepress.com/forums/topic/menu-social-icons/

But the steps are spelled out a bit more clearly here:

Putting Social Icons on far right of the Navigation Menu as on http://www.generatepress.com

1) You will need to create a CSS class. The easiest way to do this is to use the plugin Simple Custom CSS (which is useful for many things and mentioned many times on this forum), but you could make a child theme and put it in style.css if you prefer.

2) If you use the plugin, then under Appearance/Custom CSS add something like

.social_icon {
float: right;
}

You can change the name to whatever you want. Add other things, such as font-size or color, as you like. Save it.

3)In Appearance/Menus, expand the “Screen Options” panel at the top right of the page.

4)Select the checkbox for “CSS Classes”. This is how you add your style to a menu item.

5)Create a menu item from the “links” type. In the “URL” put your facebook (or other social media) link. You will make one menu item for each link you want, of course.

6) To use, Font Awesome icons, in the “navigation label,” put

<i class="fa fa-facebook"></i>

for facebook. Use straight quotes.
The other icons can be found here

https://fortawesome.github.io/Font-Awesome/cheatsheet/

7) In the CSS Classes, put “social_icon” with no quotes or period.

8) Save Menu.

[Tom]

Thanks so much, Dee! Those instructions are perfect 🙂

[René Würfel]

Hi Tom,

I followed Dee’s pretty good guide to put social network icons in the menu bar. However, even though I created a CSS class and make it float on the right, it won’t stick there. It seems that the CSS instructions are ignored for whatever reason.

I use the CSS Stylesheet Editor from the wordpress jetpack plugin and my code looks like that:

.social_icons_dvdi {
float: right;
}

In the menu I create a link with display name <i class=”fa fa-facebook”></i> and CSS class social_icon_dvdi

Icons are displayed but won’t float on the right. I have to say that I haven’t installed the font awesome plugin, but seems that i don’t really need them. But i would prefer your icons from the lightweight icons plugin. How do I use them instead?

[René Würfel]

Sorry, the classes name is social_icons_dvdi
It stil doesn’t work though 🙁

[Tom]

Can you link me to your site so I can take a look?

Thanks!

[René Würfel]

Yes, of course. But the site is not yet available for the public, only by authenticated users.
Either I will get back to you when it’s available (a few days maybe) or you tell me what to look for in the meantime. 🙂

[Tom]

Things to check.

1. Make sure the menu item has the correct class in “Appearance > Editor” – check spelling.

2. Make sure your CSS has a period in front of it, like so:

.correct-class {
      float: right;
}

That should be it.

One thing you can try, which I like to avoid but it’s worth a shot, is adding !important to the CSS attribute.

.correct-class {
      float: right !important;
}

[René Würfel]

Tom, you are a genius!

.correct-class {
float: right !important;
}

makes the difference. I could live with that, but I’m also at your service to find the root cause, in case it’s another bug.

Thanks
René

[Tom]

Awesome! That will work for now – once the site is live you can post back here and I’ll see if we can remove that !important, but it’s not a big deal either way 🙂

[Russell]

Hi guys,
I tried to follow instructions above but it’s not working for me.
When I go Appearance>menus -> screen options

I tick CSS Classes and I see absolutely no change to the UI. I’m expecting to see a new widget or something right?

Many thanks in advance for any help.
Cheers,
Russ

[Tom]

The CSS Class input will appear when you expand individual menu items by clicking the arrow next to each item.

[Stephane]

Ok. I have try this process. Let’s have a look here! (yeah I’m working/testing GeneratePress on several websites …)

I have some issues and thinkings about it :
– for the issues, I configure with the customizer the navigation to the left side and I put the social icons on the right side with the Custom CSS. It doesn’t work because I think the secondary navigation is prior (as you said). What is the solution? Put “!important” to float social_icon CSS? It’s working well but perhaps another new solution exist?

– for the thinking, I wonder if it could be possible to affect a color to the secondary (or primary) navigation layout to enhance the buttons? You can see an example here. Not only to the menu buttons.

[Tom]

Hi Stephane,

1. CSS is all about being specific – the more specific something is, the more likely it will be read over the other CSS. In this case, this should work:

.secondary-navigation li.social_icon {
    float: right;
}

2. You can also use CSS for this – simply add more classes to each menu item and then add CSS for them:

.secondary-navigation li.social_icon.facebook a {
    background: #whatever color;
}

.secondary-navigation li.social_icon.facebook a:hover {
    background: #whatever color;
}

Let me know if that makes sense or not 🙂

[Vojtech Pasko]

Hi there.

This solution did work but only half way. It is at the right spot, thats fine. But problem is at smartphone.

At primary menu i have button menu where i click and then i can see whole navbar. There i can see every item at single row and at last row i have search button and two social buttons. Problem is that if i click at them, its like i click at search button.

you can check it here

second problem is, that if i use this at second nav bar, then at smartphone version of website have each social button own row. Like menu. I like, how it looks at primary menu, buttons at one row.

[Author]

Posts