Skip to content
GeneratePress
  • Home
  • Premium
  • Site Library
  • Install
  • Help
    • Documentation
    • Support Forum
    • Contact
  • Log In
GeneratePress
  • Home
  • Premium
  • Site Library
  • Install
  • Help
    • Documentation
    • Support Forum
    • Contact
  • Log In
  • Log In
  • Free Support

[Resolved] SOCIAL NETWORKS BUTTONS ON NAV MENU BAR

Home › Forums › Support › SOCIAL NETWORKS BUTTONS ON NAV MENU BAR

  • This topic has 89 replies, 14 voices, and was last updated 3 years, 5 months ago by Ian.
Viewing 15 posts - 16 through 30 (of 90 total)
← 1 2 3 4 5 6 →
  • Author
    Posts
  • November 27, 2014 at 2:39 pm #49573
    Tom
    Lead Developer
    Lead Developer

    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

    November 27, 2014 at 2:54 pm #49585
    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.

    November 28, 2014 at 12:01 am #49676
    Tom
    Lead Developer
    Lead Developer

    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

    November 30, 2014 at 10:35 am #50024
    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.

    November 30, 2014 at 12:50 pm #50042
    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

    November 30, 2014 at 6:44 pm #50101
    Tom
    Lead Developer
    Lead Developer

    @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

    November 30, 2014 at 10:57 pm #50106
    Stephane

    Thank you very much Tom. It is working great.

    December 1, 2014 at 4:52 am #50164
    Vojtech Pasko

    Im fine with solution without search button. Thank you πŸ˜‰

    December 1, 2014 at 11:50 am #50349
    Tom
    Lead Developer
    Lead Developer

    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

    February 24, 2015 at 1:05 pm #79555
    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

    February 24, 2015 at 5:38 pm #79632
    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!

    February 24, 2015 at 11:23 pm #79693
    Tom
    Lead Developer
    Lead Developer

    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

    March 9, 2015 at 3:19 pm #84421
    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

    March 9, 2015 at 11:15 pm #84560
    Tom
    Lead Developer
    Lead Developer

    Nice site! πŸ™‚

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

    March 16, 2015 at 2:13 pm #87585
    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
Viewing 15 posts - 16 through 30 (of 90 total)
← 1 2 3 4 5 6 →
  • You must be logged in to reply to this topic.
Log In

Common Issues

  • Missing style.css
  • Updating errors
  • Plugin Install Failed

Useful Articles

  • Installing GP Premium
  • Installing GeneratePress
  • How to add CSS
  • How to add PHP

GeneratePress

  • About
  • Premium
  • Site Library
  • Gutenberg
  • Affiliates
  • Reviews
  • Brand Assets
  • Blog
  • We’re Hiring!

Support

  • Documentation
  • Contact Us
  • Support Forums
  • Fastest WordPress Theme
  • Changelogs
  • Legal
  • Donate
  • Translate

Popular FAQs

  • Install GeneratePress
  • Installing GP Premium
  • Missing style.css
  • Plugin Install Failed
  • Adding CSS
  • Adding PHP
  • WordPress Hosting

Social

  • Facebook
  • Twitter
  • WordPress
  • GitHub
Made with on Vancouver Island
  • Home
  • Premium
  • Site Library
  • Install
  • Contact
  • Support Forum
  • Documentation
  • Account
  • Checkout