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

[Nicole]

How do I put social media icons on the left side of primary navigation bar?
Currently, I have my menu items on the right.

I want to enter this shortcode: [DISPLAY_ULTIMATE_SOCIAL_ICONS].

[Tom]

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 🙂

[Nicole]

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

[Tom]

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

Additional CSS is the perfect spot for that CSS 🙂

[Nicole]

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

[Tom]

You’re welcome 🙂

[Nicole]

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;
}

[Tom]

I’m not seeing them on your site – are they still added?

Let me know 🙂

[Nicole]

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

[David]

Hi there,

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

[Nicole]

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

[David]

Try this CSS:

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

[Nicole]

Resolved! Thank you!

[David]

Awesome. Glad to be of help.

[Author]

Posts