How do I put social media icons on the left side of primary navigation bar?

Hi there,

Hard to say exactly without knowing what you want it to look like.

However, you can try:

1. Create a Hook Element: https://docs.generatepress.com/article/hooks-element-overview/
2. Set the hook to generate_inside_navigation
3. Add this as your hook content:

<div class="ultimate-social-icons">
    [DISPLAY_ULTIMATE_SOCIAL_ICONS]
</div>

4. Set your Display Rules.

Then you can add this CSS:

.ultimate-social-icons {
    float: left;
}

Let me know :)

It is displaying the actual shortcode, rather than the social media buttons. How do I get it to show the actual social media buttons?

Ah sorry, make sure the "Execute Shortcodes" checkbox is checked.

Additional CSS is the perfect spot for that CSS :)

Good job Tom! You did it! Thank you so much!

You're welcome :)

As an extention to the previous question: I moved the icons to a secondary navigation bar under my header image. How do I do the following center the social media icons? This CSS didn't work:

.ultimate-social-icons {
float: center;
}

I'm not seeing them on your site - are they still added?

Let me know :)

I've re-added one social media icon for now. FB. How do I center it?

Hi there,

i can't see the icon on the site? If you have added it can you clear any plugin/server caches?

Sorry, it's there now! Please re-check.

Try this CSS:

.sfsi_widget {
    display: flex;
    justify-content: center;
}
.sfsi_widget .norm_row {
    width: auto !important;
}

Resolved! Thank you!

Awesome. Glad to be of help.