Archived topic
Customize Footer CSS
3 replies · Started by Oriol on March 23, 2021
Hello,
Is here any way to customize more in details widget distribucion in the footer?
We currenlty display 4 columns of links, on widget areas 1, 2, 3, 4. Every widget area contains a navigation menu with links we want to show.
From that, we need to align the widget content (not individual links, but all the content) to the center, but we haven't been able to do that through customization setting on the layout.
Inside every widget menu, We would also like to display the top menu item on every columns in bold text, and don't display indentation on the child element links.
Can you help identufy the correct classes in order to do that through CSS?
Thank you so much for your help.
Hi there,
tricky one - try adding this CSS:
/* Bold first menu item */
.inside-footer-widgets aside>div>ul>li>a {
font-weight: bold;
}
/* Centralise menu widget */
.inside-footer-widgets aside>div {
display: flex;
}
#footer-widgets .inside-footer-widgets aside>div ul {
margin-left: auto;
margin-right: auto;
}
/* Align left on Mobile */
@media(max-width: 768px) {
#footer-widgets .inside-footer-widgets aside>div ul {
margin-left: 0;
}
}The second widget won't look 100% centrally aligned as the length of the first menu item is longer and needs to wrap to a new line on smaller screens.
Hello David, it looks much better now!
The other thing we would like to show is a logo at the top of the footer.
I tried to show it inside an Element, and adding a displaying rule to "before footer content", but it does not display it inside the footer, and before the 4 columns, but in a separate footer.
Than you so much again!
Hmmm...
can you add a 5th Widget ( but position it so its first in the list ) to the footer and add the logo inside there - ill then take a look at some CSS to align it above the menus.
