[Resolved] SOCIAL NETWORKS BUTTONS ON NAV MENU BAR

[Tom]

Hi there,

You can add this CSS to your site to fix that issue:

@media screen and (max-width: 768px) {
      .social-icon {float: none !important;}
}

As for the second issue, I’ll take a look – it may be a bug.

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

[Vojtech Pasko]

thank you for such a quick reply, but it does not work.

It remains the same, at mobile version if i click on google or facebook icon at my page it opens search tab same as in search icon case. At deskop and tablet version its fine.

I did put it into custom css, deleted the previous one and also tried to put it at new line with keeping the original one. Same result except at desktop version without original float right was icons aligned at left same as rest items at menu.

sorry for my bad English i hope you do understand me.

[Tom]

You need to have both pieces of code.

The first applies to browsers, the second applies to screens smaller than 768px.

So, your complete code would be:

.social-icon {
      float: right !important;
}

@media screen and (max-width: 768px) {
      .social-icon {float: none !important;}
}

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

[Stephane]

Hello Tom,

It is working.

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

It is ok

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

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

I replace by this

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

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

because I don’t see how to apply the “facebook” CSS on the A element in the menu? And have individual behaviors on each social icons.

[Vojtech Pasko]

Hey Tom, i have custom css exactly how have you wrote, but its still same. Maybe it is a android bug. Its doing at chrome and default android browser the same thing.

If you have search button enabled then it is at the same row as social icons at smartphone web. Then everything you press at that page is like pressing search. If i disable search button than it works well. So i did…

I will put search somewhere else. Thanks for help

[Tom]

@Stephane – in order to apply different styles to each button (facebook, twitter), you need to add that additional class to the element that you’ve added “social_icon” class to.

So in the “CSS Classes” area you would put “social_icon facebook” instead of just “social_icon”.

Let me know if that makes any sense.

@Vojtech – that’s weird, I tested and it worked for me. I went to take a look at your site, but it appears you removed the search button.

Let me know if you want more help 🙂

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

[Stephane]

Thank you very much Tom. It is working great.

[Vojtech Pasko]

Im fine with solution without search button. Thank you 😉

[Tom]

You’re both welcome 🙂

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

[Kate]

Hi Tom

I’m having trouble and need help getting FB and Twitter buttons to appear on my menu as on generatepress.com. I’m pretty sure I’ve followed the steps you outlined above, but they won’t swing to the right. Any ideas?

I can’t get Facebook to appear either, but that’s not your problem 😉
Cheers
Kate

[Kate]

I found more advice and made this work, though not quite how I’d like… I’ll need to learn a lot more code before I finally crack this 😉

I have another query on a different topic, will post a fresh topic.

Thanks!

[Tom]

Hi Kate,

If you can link me to your site I can see how you’ve done it and can offer a better way if it exists 🙂

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

[Mark Flint]

Hi all,

I had the same issue as Rene with the social icons not aligning to the right, but Tom’s !important fix worked a treat for me too. Cheers Tom!

Mark, http://www.flintmarketing.co

[Tom]

Nice site! 🙂

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

[Mark Flint]

Hi Tom,

Another question on this for a new site this time: http://www.strawberryshop.flintmarketing.co

I’ve added the social media icons as before and they’ve aligned to the right as intended, but as the rest of the menu was aligned to the centre the social media icons have pushed the rest off-centre. Do you know a CSS override that would centralise them again? I tried:

.menu_item {
float: centre !important;
}

But it didn’t work.

Thanks,
Mark

[Author]

Posts