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 - 46 through 60 (of 90 total)
← 1 2 3 4 5 6 →
  • Author
    Posts
  • August 4, 2015 at 8:08 am #126361
    Tom
    Lead Developer
    Lead Developer

    Hi Monica,

    All you have to do now is add this class to your menu item: menu-item-float-right

    GP takes care of the rest 🙂

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

    August 4, 2015 at 8:19 am #126365
    Monica

    Hi Tom,

    Thanks for your quick response and congrats on your GeneratePress theme, it is really good.

    I added menu-item-float-right to all the pages on my navigation menu, but still no sign of the social icons. I wanted to make them appear on the right hand side of the header, but I cannot even see them in the menu. Thanks.

    August 4, 2015 at 8:39 am #126374
    Tom
    Lead Developer
    Lead Developer

    Can you possibly link me to your site? Either through here or at support@generatepress.com?

    Thanks!

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

    August 4, 2015 at 8:45 am #126376
    Monica

    Have sent you an email to the above address. Thanks for your help. Very kind.

    August 4, 2015 at 9:57 am #126411
    Tom
    Lead Developer
    Lead Developer

    It looks like your facebook icon is still using this class: social_icon

    Have you tried switching it to: 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

    August 4, 2015 at 10:18 am #126420
    Monica

    Hi Tom,

    Tried that and sent you a few screenshots via email.

    August 4, 2015 at 10:31 am #126427
    Tom
    Lead Developer
    Lead Developer

    Seems you want the icons in the header, in which case you can use this plugin: https://wordpress.org/plugins/lightweight-social-icons/

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

    August 8, 2016 at 2:56 pm #216665
    2coins1

    Hi,

    Hi. I’m a total novice at WordPress and I don’t know how to code but I and follow directions well. How do I add Search and Social Media icons to the right side of my menu bar like you have on your GP demo video: http://screencast.com/t/sFEUmYdp6l2 See here for my site: http://screencast.com/t/iDyQYhsF

    Thank you.

    -2coins1

    August 8, 2016 at 3:48 pm #216686
    Leo
    Staff
    Customer Support

    Hello,

    Add Search to the right side of the main navigation:
    – Enable Navigation Search in Customizer > Layout > Primary Navigation
    – add the following CSS:

    .main-navigation .navigation-search {
        float: right;
    }

    Adding CSS: https://generatepress.com/knowledgebase/adding-css/

    Add social media icons to the right side of the main navigation:
    – This page should explain everything: https://generatepress.com/knowledgebase/menu-social-icons/

    Let me know if this helps!

    Documentation: http://docs.generatepress.com/
    Adding CSS: http://docs.generatepress.com/article/adding-css/

    August 8, 2016 at 11:34 pm #216756
    Tom
    Lead Developer
    Lead Developer

    The search button should actually appear on the right side by default, you just need to enable it as Leo pointed out above – no need for the CSS though.

    The menu social icons article Leo pointed you to should help with the social icons 🙂

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

    August 9, 2016 at 12:08 am #216773
    Leo
    Staff
    Customer Support

    Thanks Tom. Just curious, if I have the navigation alignment set to center, how would I move Search to the right?

    Documentation: http://docs.generatepress.com/
    Adding CSS: http://docs.generatepress.com/article/adding-css/

    August 9, 2016 at 8:38 am #216868
    Tom
    Lead Developer
    Lead Developer

    You could do something like this:

    .nav-aligned-center .main-navigation .menu > li.search-item {
        float: right;
    }

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

    January 31, 2017 at 9:09 am #272378
    Marcus

    On desktop everything looks fine now. But on the mobile page, when I open up my menu the social icons all appear one below the other. I would like to have them site by site on the bottom of my menu tap, or have them on the nav menu site by site with the word “menu”. For example the word menu on the left, and on the right the social icons.

    My website: talking-ev.de

    Do you have any hint how to do that?

    January 31, 2017 at 10:19 am #272452
    Tom
    Lead Developer
    Lead Developer

    If you use these instructions to float the menu items to the right, then they should show up next to each other (inside the mobile menu): https://docs.generatepress.com/article/adding-icons-to-menu-items/#floating-the-icon-to-the-right

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

    January 31, 2017 at 10:27 am #272455
    Heath

    I’m glad Marcus made this thread ping for me.

    I have .social_icon set to not display at media < 984px, which used to remove the icons from the expanded mobile menu (I have them floating right on the mobile navigation bar instead). But, at some point those pesky social icons worked their way back into the expanded menu (I don’t want them there). I didn’t notice it until now. Do you know why they’re not adhering to my “.social_icon display: none” command?

    Thanks Tom!

    Dad Kingdom - powered by GeneratePress

  • Author
    Posts
Viewing 15 posts - 46 through 60 (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