[Resolved] SOCIAL NETWORKS BUTTONS ON NAV MENU BAR

[Mustafa]

Hi Leo,

Thanks for your reply.

Here is the site.

I’m trying to increase the size of the Facebook button in the primary menu. It looks too small at the moment in comparison to the size of the text of the other menu items. But I don’t want to increase the size of the other menu items.

Is that possible?

[Leo]

This should work:

.main-navigation .social_icon a {
    font-size: 20px;
    color: #3b5998 !important;
}

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

Let me know.

[Mustafa]

That works beautifully.

Thanks!

[Leo]

Glad I could help!

[Mustafa]

Btw how can I change the colour to the default blue Facebook colour for the icon?

[Leo]

Adjusted the code above: https://generatepress.com/forums/topic/social-networks-buttons-on-nav-menu-bar/page/6/#post-311966

[Mustafa]

Thanks that’s great!

Are you able to recommend a good course to learn CSS?

[Leo]

This site is a good starting point with some quick walk throughs: https://www.codecademy.com/learn/learn-html-css

This site has lots of good info: https://www.w3schools.com/css/default.asp

Then definitely learn to use the developer’s tool from your browser is absolutely the key 🙂

[xepace]

Hello. Maybe someone know how to fix position of facebook button on nav menu? I would like to put the button to the right position for all screen resolutions. Like on images
http://i.imgur.com/1vcjtZi.png
http://i.imgur.com/dmX26jU.png
http://i.imgur.com/4WlkB6y.png

[Tom]

Can you start a new topic for that?

Thanks!

[Mustafa]

Thanks for the links Leo.

I will check them out.

[Leo]

Awesome!

[Ian]

Hi folks,

Ok trying to integrate the above and keep hitting brick walls 🙁

I’ve created 3 menu options, one for Facebook, one for Twitter and one for Instagram.

The CSS i’ve added to Customize-Additional CSS is…

.main-navigation li.social_icon_facebook {
    float: right; !important
}
.main-navigation li.social_icon_twitter {
    float: right; !important
}
.main-navigation li.social_icon_instagram {
    float: right; !important
}

And the CSS classes i’m using in the menu options is…

social_icon_twitter
social_icon_facebook
social_icon_instagram

Now…that works. I have icons floating right linking to their respective networks.

But I want to now change the hover color of those icons from the default I have set up to their respective own colours, so like blue for FB, aqua for Twitter and ermm possibly a gradient for instagram.

I can get the colours easily enough and create the gradient too but working out the CSS to make the hover I cannot do.

Please help if you can 🙂

[Leo]

Hi there,

Since this post is already so long can you please create a new topic and provide a link to your site if you can?

Thanks!!

[Ian]

Hi Leo…sure thing 🙂

[Author]

Posts