1. Try this CSS for desktop:
@media (min-width: 769px) {
.navigation-branding {
position: absolute;
left: 50%;
transform: translatex(-50%);
}
.menu-bar-items {
width: 100%;
justify-content: space-between;
}
}
2. For mobile, the image shows the same order as menu/logo/search, so what do you want exactly for mobile?