How do you center the brand logo/text in the navbar?

[hellowmellow]

Hi all, I am using Persona theme. Trying to make some tweaks. This has taken my whole afternoon and would really appreciate some response.
How can you put the left hand side brand logo/text to exactly center of the navbar in Persona theme?

[baris]

You need to modify this file and move the logo, keep in mind adding or removing navigation items would move it around if you put it on the right.

[PitaJ]

Should be able to accomplish this with just CSS. Unfortunately I don't have a Persona forum on hand to experiment with.

[hellowmellow]

Thanks guys. Hey @PitaJ . Where exactly would I change in CSS if I wanted to? I was inspecting and I think this is the css class for it?

.navbar>.container-xxl {
  display:flex;
  flex-wrap:inherit;
  align-items:center;
  justify-content:space-between
}
.navbar-brand {
  padding-top:var(--bs-navbar-brand-padding-y);
  padding-bottom:var(--bs-navbar-brand-padding-y);
  margin-right:var(--bs-navbar-brand-margin-end);
  font-size:var(--bs-navbar-brand-font-size);
  color:var(--bs-navbar-brand-color);
  white-space:nowrap
}
.navbar-brand:focus,
.navbar-brand:hover {
  color:var(--bs-navbar-brand-hover-color)
}

[hellowmellow]

I got it centered following @baris instructions. Worked great but the logo disappears in mobile phone view. I guess fucked up the responsive style somehow.

[Wilco]

Wonder what happens if you just change the order with CSS 'order: 1' for example. By the looks of it you should already come pretty close this way.