[Resolved] Menu/Navigation Social Media Icons alignment

Home Forums Support Menu/Navigation Social Media Icons alignment

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #309470
    Dayne

    My starter website with GP is coming along nicely, figuring out how to set the theme up slowly but surely.

    http://new.youfit.xyz/

    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.

    #309478
    Leo
    Staff
    Customer Support

    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.

    #309538
    Dayne

    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?

    #309644
    Dayne

    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.

    #309680
    Leo
    Staff
    Customer Support

    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.

    #309821
    Dayne

    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.

    #309845
    Leo
    Staff
    Customer Support

    Check your Navigation text current setting in the Advanced tab in Page Header Meta box.

    Let me know if this helps.

    #309857
    Dayne

    Awesome, thank you.

    I knew I set it somewhere before as it was blue but couldn’t recall where.

    Cheers

    #309858
    Leo
    Staff
    Customer Support
Viewing 9 posts - 1 through 9 (of 9 total)
  • You must be logged in to reply to this topic.