[Resolved] How to make footer menu horizontal?

[Jason]

Hi there, how can I make my secondary menu which is my social media icons menu, show horizontally instead of vertically in the footer? as I can’t find an option to show the horizontally, and they look ugly vertically, thank you

[Tom]

Can you link me to what you have so far?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Jason]

http://salsarepublic.com.au/ the footer the icons show vertically, whereas I would like the to show horizontal

[Tom]

This CSS should do it:

.footer-widgets .widget_nav_menu li {
    display: inline-block;
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Jason]

thanks, I put that code in cutsom CSS but it’s still showing vertically?

[Tom]

Clear your browser cache or do a hard refresh.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Jason]

sorry now it worked, thanks 🙂

[Jason]

is there any way to space them out more? the icons are right next to each other.

[Tom]

Yep, just change your CSS:

.footer-widgets .widget_nav_menu li {
    display: inline-block;
    margin: 0 10px;
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Jason]

oh yeah der, thanks, sorry still new to css, cheers

[Tom]

No problem, glad I could help 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Jason]

yeah your theme is awesome, love it, cheers 😉

[Tom]

Thanks!

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Kirtish Vyas]

Hi Tom,

I tried entering in code snippet using the same code .footer-widgets .widget_nav_menu li {
display: inline-block;
} but it seems an error can you tell me how to fix the menu in the footer as horizontal, my site is bloggingos.com

[David]

Hi there

the code is CSS – this doc explains adding CSS:

https://docs.generatepress.com/article/adding-css/

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts