Top bar divided into three columns

Hi there,

follow these steps:

1. Add this CSS to your site:

@media(min-width: 600px) {
  .inside-top-bar.grid-container.grid-parent {
    display: flex;
    justify-content: center;
  }

  .inside-top-bar.grid-container.grid-parent aside:nth-child(2) {
    margin: auto;
  }
}

2. Add your 3rd widget.

3. Change the widget order to reposition them.

Perfect!
Thanks for the great support :)

You're welcome

Hi David!
Have there been any new updates?
I tried to divide the top bar into 3 columns with the css and it doesn't work.

Hi Stefano,

1. Go to customizer > layout > topbar, change Top Bar Alignment to center.

2. Try this CSS instead:

@media(min-width: 600px) {
  .top-bar .inside-top-bar.grid-container >* {
    margin: unset;
  }
.top-bar .inside-top-bar.grid-container {
    justify-content: space-between;
  }
}

Let me know :)

Hi Ying,
I tried but it doesn't work :(

Ah, I see...

Could you try to replace your current CSS with this edited CSS:
https://generatepress.com/forums/topic/top-bar-divided-into-three-columns/#post-1742055

Let me know :)

Perfect! Now it works
Thanks for the support :)

You are welcome :)