Top-Bar Alignment: 1 Left/1 Center/1 Right

Hi there,

it takes a little CSS. Do you have a site with the Top bar and the 3 widgets in place? If so share a link and ill take a look at the CSS required.

Hi David,

thanks for getting back to me on this. It slipped away from our priorities, but now I'd like to get back to it :)

I'll place the link to the shop in the private information. Here we have three widgets in place – actually five, which is a little hack to have them all aligned on the left. However, ideally one should be aligned to the left, one centered, and one aligned to the right.

Thanks,
Vin

Hi Vin,

I don't see the site info being added to the private info field, can you confirm?

You're right, I forgot :) Here it comes

Give this CSS a try:

.inside-top-bar.grid-container.grid-parent {
    display: flex;
    justify-content: space-between;
}

Oh, fantastic, almost there! I already applied it. However, ideally I'd like the left item to be aligned all to the left, and the right item aligned all to the right. I tried playing around with "align-self" just now, but can't get it right. One more hint? :)

1. Can you check if you are still using float at customizer > general, if so, can you switch to flexbox?

2. You have these CSS which adds margin to the top bar widget, maybe remove them?
https://www.screencast.com/t/Dwv8NRjeGC

3. You have this CSS which make the inner topbar narrower: https://www.screencast.com/t/4fEhtPwopV

I'm not sure where the CSS comes from as the cache plugin is on, if it's added by you, maybe remove it?

Let me know :)