Archived topic
Footer Bar Widgets not center in line
3 replies · Started by Elzanne Cronjé on May 28, 2020
Hi there.
I have two widgets in the footer bar:
1 image widget that I want to display in the dead center of the footer bar
and 1 navigation menu widget that I want to display on the right side
I want to copyright to stay on the left side, which it automatically does as it is not a widget.
How do I center center the image widget in te footer bar, and also align the navigation to it.
If I center alight the footer bar in the customizer, it just places it beneath each other in the center.
I have used the following css:
.footer-bar > .widget {
display: inline-block;
margin: 0 10px;
}
Thank you.
Hi there,
hmmm... you could try this CSS:
@media(min-width: 1200px) {
.site-info {
position: relative;
}
.footer-bar {
display: flex;
}
.footer-bar > .widget.widget_media_image {
position: absolute;
left: 50%;
transform: translateX(-50%);
top: 0;
}
}It only works on 1200px+ screens as there isn't enough room for all three in a line otherwise.
Thank you so much David. It's perfect now! :-)
You're welcome
