SOCIAL NETWORKS BUTTONS ON NAV MENU BAR

[Tom]

To make the items stick with the others, remove all of the CSS mentioned in this thread. The items will sit like regular menu items without any tweaking 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Mark Flint]

Yeah but I want the main menu items aligned bang on centre under the centralised logo, and the social media icons out of the way on the right. But the icons are pushing the main menu items off to the left… Is there a way to fix this?

[Tom]

Ah, float: right will push the other menu items over a bit.

Using position: absolute will make it so the other menu items ignore the social icons.

Something like this:

.social_icon {
      position: absolute;
      right: 0;
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Mark Flint]

Thanks Tom. The code did work, but with a little tweaking. I had to add in !important for it to kick in and once I’d done that it ended up aligning in the right place but with both icons on top of each other. So I created CSS for each icon and adding padding to the second:

.twitter_icon {
position: absolute !important;
right: 0;
}
.facebook_icon {
position: absolute !important;
right: 0;
padding-right: 40px;
}

This has made it work: http://www.strawberryshop.flintmarketing.co

However these icons don’t seem to be appearing on mobile… Any idea why that would be??

[Tom]

You can make sure that the absolutely positioning only happens on desktop with this (instead of the above):

@media screen and (min-width: 769px) { 
      .twitter_icon {
            position: absolute !important;
            right: 0;
      }
      .facebook_icon {
            position: absolute !important;
            right: 40px;
      }
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Mark Flint]

Nailed it! Thanks Tom 🙂

Mark
http://www.flintmarketing.co

[Tom]

You’re welcome! 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Heath]

I used these instructions and got the icons to work. (I had to use the “!important” suffix.)

But, I like how your social icon widget has the option to “open in new window”. Can I somehow apply this functionality to the navigation icons I’ve creating using Dee’s steps?

Thanks for having the best support EVER!

PS – Just bought the Sections add-on and looking forward to playing with it. Can’t wait to see what add-on you put out next! Also, it might be helpful if you create Support sub-sections for each specific add-on (and the social icons widget).

Dad Kingdom - powered by GeneratePress

[Tom]

In “Appearance > Menus”, click the “Screen Options” tab at the top right, and check the “Link Target” checkbox.

Now open your menu items, and you’ll see an option to open your links in a new window 🙂

BTW, in GP 1.2.9.7, I added a built in class to float menu items to the right: menu-item-float-right

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Heath]

That was easy, Thanks! That check box should show up for URLs by default!

What’s an example of how would you apply the new class you built in?

Dad Kingdom - powered by GeneratePress

[Tom]

It won’t work until the next version of GP, but it would mean you could skip the !important part and adding your own CSS, and just add the class above into your CSS Class field in the menu item 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Elio Martinez]

Hi,

So which is the code to add the social icons in the nav menú like http://generatepress.com/? Ihave seen a lot of code and examples in this topic, but I don’t know whic code is the right one.

Thanks-

[Heath]

Elio, just follow the instructions on page 1 of this topic. There are basically three components: The CSS class, the icons, and the menu. Dee pretty much nails it. 🙂

Dad Kingdom - powered by GeneratePress

[Tom]

Latest and greatest method:

1. Add your social icons to your menu using FontAwesome in “Appearance > Menus” – add a custom link, input your social URL, and then add the FontAwesome HTML for the icon you want in the navigation label.

2. To make it float right, go to “Screen Options” at the top right of the Menus page, and make sure “CSS Classes” is checked.

Now open your menu item you want to float right, and add this class: menu-item-float-right

That should be it 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Monica]

Hi,

I cannot manage to make it work. I added the plugin Simple Custom CSS and the following:

.social_icon {
float: right;
}

Checked the CSS class on the screen options.

And tried the following:

Url: my Facebook url
navigation label: <i class=”fa fa-facebook”></i>
CSS Classes: social_icon

but it does not work. tried a few variations but cannot manage to get it to work.

I also tried tin stalling the lightweight social icons plugin but it doe snot give me the option to add urls. Wanted to attach some screenshots to show you but I cannot do it here.

I am trying to put the social icons to the right above the navigation menu. Any suggestions? Thanks.

[Author]

Posts