[Resolved] lightweight social icons using generate_inside_navigation hook

[Marcus]

Is there a way to use the “lightweight social icons” plugin inside of the global navigation? I was assuming it might involve the generate_inside_navigation hook?

I’m trying to have: [LOGO (left)] —— [Navigation + Lightweight Social Icons (right)]

Essentially all on one line in the header, logo left; navigation and lightweight social icons right.

Thank you!

[Leo]

Hi there,

Using FontAwesome should be a better method: https://docs.generatepress.com/article/adding-icons-to-menu-items/

[Marcus]

Thank you! I actually had looked at that technique you linked to earlier today, but wanted to take advantage of the ease of use of lightweight social icons plugin instead if possible.

[Leo]

That would actually complicate things which is why we’ve written that article 🙂

It should be relatively easy if you follow the steps but definitely let me know if you get stuck somewhere.

[Marcus]

I was able to add the shortcode via the Widget Shortcode plugin and this hook:

add_action( 'generate_inside_navigation','addnavshortcode' );
function addnavshortcode() {
echo do_shortcode( '[widget id="lsi_widget-2"]' );
}
?>

However, the icons appear above the navigation and not to the right side as I hoped they would. I guess some CSS is in order?

[Leo]

Hmm try wrapping it in a div with a class then use CSS to float: right;

[Marcus]

Thank you for the help Leo. I think the float right will work if I can figure out how to make the container a little wider? So close!

[Leo]

The site container? Should be here: https://docs.generatepress.com/article/container-width/

[Marcus]

No, it looks like the “nav#site-navigation.main-navigation” is what is too narrow. It’s causing the last link, “CONTACT”, to be pushed down. Wondering if that container could extend out more to the left to make room for the social icons.

Thank you for all the help Leo!

[Leo]

Can you link me to the page?

[Marcus]

I have this running locally via Flywheel right now, but this live link should let you take a look.

http://7af15c0f.ngrok.io/

Thank you Leo!

[Tom]

Try adding this CSS:

#primary-menu {
    float: left;
}

[Marcus]

Brilliant! Yes, that’s what I needed!

Thank you Tom!
Thank you Leo!

[Tom]

Glad we could help 🙂

[Author]

Posts