We’re with you. JoomShaper is offering a 20% Discount on all plans due to the impact of COVID-19

Support Online : Mon - Fri / 10am - 6pm (GMT +6)

Your Time: Our Time:

Footer Menu creation

Featured Lock Resolved Task
I need to add a footer menu, using finance template, i added a new position on layout towards the end.
created a new module "menu" and applied nav-li and center-li
now i need to delete the symbol before each menu item, add padding and manage backgrounds.
i tried to add css rules, bad cant mess with nav-li since applies to another menus.
can you help me format this menu ?

6 Answers

Paul Frankowski - Staff

More than a month ago #Permalink
you have to hide icon from ::before,
I haven't seen your site URL, but this should help:

#sp-footer ul li::before,
#sp-footer-menu ul li::before,
#sp-footer-menu ul li a::before,
#sp-footer ul li a::before

=======UPDATED, Universal fix===

Paul Frankowski - Staff

More than a month ago #Permalink
Use Code Inspector from your browser to check which class you have to override to add padding or bg color, etc.
Read: https://www.joomshaper.com/blog/which-line-of-css-i-have-to-edit-code-inspector-in-action


More than a month ago #Permalink
thank you, this is what i added on the ccs custom
.sp-module ul > li > a::before {font-family: FontAwesome; content: none; margin-right: 8px;}
.sp-module ul > li {font-size: 14px; padding-right: 20px;}
.sp-module ul > li >a {padding: 0px 10px 0px 10px;}

i applied your code but it didn't work.


More than a month ago #Permalink
#sp-footer-menu ul > li > a::before {display:none;}
#sp-footer-menu ul > li > a {padding: 0px 10px 0px 10px;}
#sp-footer-menu ul > li {font-size: 14px; padding-right: 20px;}

this worked thank you

Paul Frankowski - Staff

More than a month ago #Permalink
my code wasn't worked probably (also) because you renamed default footer ID name.
It's very hard to help (cure) not seeing a patient, right.


More than a month ago #Permalink
Don't worry Paul, i created a new position on the layout for the module. Gracias mil!
Your example helped me to understand much better since i was trying something similar but different and not correct. saludazo amigazo! and thanks again!

There are no replies made for this post yet.
Be one of the first to reply to this post!




Community Users


Don’t miss any updates of our new templates and extensions and all the astonishing offers we bring for you.
We never spam

Joomla! ® name is used under a limited license from Open Source Matters in the United States and other countries. JoomShaper.com is not affiliated with or endorsed by Open Source Matters or the Joomla! Project.

Connect Us