Archived topic
Menu/Navigation Social Media Icons alignment
8 replies · Started by Dayne on April 23, 2017
My starter website with GP is coming along nicely, figuring out how to set the theme up slowly but surely.
I would like to know how would I center the navigation menu social media icons within their respective list items? Adding align: center; in custom css isn't working for me.
If you hover over the icons when looking at the sticky menu you can see they are off center.
Also, I would like the links to open in a new tab, how would i add the code to the css?
Thanks.
Hi there,
The social icons are not centered when hovered because this CSS was added:
ul .fa {
width: 0px;
font-size: 18px;
text-align: center;
}If you remove the width: 0px then it should be centered.
To open menu item in new window, this should help: https://generatepress.com/forums/topic/open-social-media-menu-icons-in-new-window/#post-59439
Let me know.
Thank you.
The reason why I set the width to 0px was because I wanted to get my social media icons closer to one another, if I remove the width they will be too far apart. How else could I achieve this?
Also, how do you change the color of the text of the current activated menu item?
If you look on my website, you will see that it is blue before becoming white when the sticky navigation activates.
I know how to change the colors of everything else, just can't seem to find this particular one.
To give the icons special padding, first add the class icon-padding to the CSS Classes in the icon menu items:
https://docs.generatepress.com/article/using-the-wordpress-menu-builder/#custom-classes
Then add this CSS:
.main-navigation .main-nav ul li.icon-padding a {
padding-left: 10px;
padding-right: 10px;
}The color option should be Customizer > Colors > Primary Navigation > Text Current.
Let me know if this helps.
The social icons spacing worked thank you.
The Text Current color only changes the sticky text current, I would like to change the text current when the sticky has not yet been called into action. Currently it is set to Blue.
Check your Navigation text current setting in the Advanced tab in Page Header Meta box.
Let me know if this helps.
Awesome, thank you.
I knew I set it somewhere before as it was blue but couldn't recall where.
Cheers
Glad I could help!
