[Resolved] SOCIAL NETWORKS BUTTONS ON NAV MENU BAR

[Tom]

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

[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.

[Tom]

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

[Monica]

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

[Tom]

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

[Monica]

Hi Tom,

Tried that and sent you a few screenshots via email.

[Tom]

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

[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

[Leo]

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/

[Tom]

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

[Leo]

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/

[Tom]

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

[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?

[Tom]

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

[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