Footer customisation

Hi Julien,

I just checked your site footer, is seems all nicely center.
https://www.screencast.com/t/SGvoaih9NU

Have you figured it out yourself?

Let me know if you still need help ??

I finally found a way by using only 1 widget! ??

.footer-widgets .widget_nav_menu li {
display: flex;
align-items: center;
justify-content: center;
display: inline-block;
letter-spacing: 0.2em;
margin-right:10px;
margin-left:10px;

}

.footer-widgets .footer-widget-1 {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;

}

I’m not sure it’s the best css but it works.

I’m now trying to make a line on the top of the menu (about 300px width).
What’s the best way?
Thanks ??

Try this CSS:

.widget_nav_menu .menu-footer-menu-container {
    position: relative;
}
.widget_nav_menu .menu-footer-menu-container:before {
    content: "";
    position: absolute;
    top: -20px;
    width: 300px;
    background-color: #515151;
    height: 2px;
    left: 50%;
    transform: translatex(-50%);
}

Feel free to adjust the numbers and color ??

@yingscarlett Thanks for you quick message! I finally found a solution.

There are still a few things I havent’t figured out it yet.

I would like to increase the space between the item menu and between the icons.

Also, I would like to change the color of the menu. The attribut color doesn’t work (but it works for the copywright text).

Also, I created a line (on the top of the menu), I would like to increase the marge between the line and menu.
I tried this :
.footer-widgets .widget_text hr {
line-height: 1.2em;
width: 300px;
margin-bottom: 60px;
}
But the margin-bottom doesn’t have any effect.

Any ideas?

Thanks a lot!

increase the space between the item menu and between the icons.

aside#lsi_widget-2 {
    margin-top: 30px;
}

change the color of the menu

.menu-footer-menu-container ul li a {
    color: #515151;
}

increase the marge between the line and menu

Just need to decrease the number of top: -20px;from the CSS I provided previously.

Awesome! Everything works perfectly. Thanks for your support, you are super responsive, it’s super cool thanks!

Last question. How to increase space between the differents icons? and between the words in the menu?

increase space between the differents icons

.lsi-social-icons li:not(:first-child) {
    margin-right: 20px !important;
}

between the words in the menu

.footer-widgets .widget_nav_menu li:not(:first-child) {
    margin-right: 30px;
}

You are welcome ??

• This reply was modified 3 years, 6 months ago by ying.

Super! It works but only when I do margin-left instead of margin-right. I don’t understand where does this come from but I least it works great!
Thanks for the code ??

You are welcome ??