To align vertically (everything), you can do this:
.toggle-text {
display: none;
}
.toggle-inner {
align-items: center;
}
.nav-toggle .toggle-inner {
padding-top: 0;
}
What that bit of code does, is remove the “text” labels and then vertically aligns everything to be lined up in the middle; for both mobile and desktop views. See this screenshot.
Regarding the changing of the layout where the title moves to the left and the other items move to the right, you could do this CSS code in the Additional CSS tab of the customizer. This “might” work for you.
.header-titles-wrapper {
justify-content: start;
}
.search-toggle,
.nav-toggle {
position: relative;
}
button.toggle.nav-toggle.mobile-nav-toggle {
order: 2;
margin-left: auto;
}
button.toggle.search-toggle.mobile-search-toggle {
order: 3;
}
@media (min-width: 1000px) {
.header-titles {
flex-direction: column;
}
.header-titles .site-description {
margin: 0.25rem 0 0;
}
}
Basically what that code does is change the structure and re-orders it where the title is 1, the navigation is in the 2 spot, and then the search is in the 3 spot.
The last code part for min-width (which is optional) will move the site tagline to sit below the site title in desktop view.