Rough Pixels

First, my huge apologies for not replying here. For some reason, I never got notification of your posting here.

Were you able to figure this out or do you still need help on this one? Plus, do you have preference to show the original publish date or the modified date?

Regards,
Andre

wow…I uploaded version 1.1.2 and forgot to save a file in the theme. Corrected that with 1.1.3 now.

**I think I need a vacation!

OK, that is weird. What version are you running of WordPress?

Testing on my end, everything is working. However, if this is showing up for you and you are on at least WordPress 4.7, I may need to remove that WP version test script. I will do that right now though.

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.

I’m not quite sure what kind of a look/layout you are wanting, but if I understand correctly, you want to manage the height of that container when in mobile view?

The theme has this:

.toggle-inner {
    display: flex;
    justify-content: center;
    height: 2rem;

    position: relative;
}

You can override the height to your preference for mobile devices. This would do it with a 20px height:

.toggle-inner {
    height: 20px;
}

Hopefully that is what you were looking for?

Best Regards,
Andre

Try this out…

.header-inner {
    padding: 3.15rem 0;
}

.toggle-inner .toggle-text {
    display: none;
}

@media (min-width: 1000px) {
.toggle-inner .toggle-text {
    display: block;
}
}

The current default margins (in this case, it’s padding), can be adjusted with the .header-inner styling, which is 3.15rem (50px) padding on top and bottom. You can reduce that to whatever works for you.

To save a bit more space, the text that shows in smaller screens “Search and Menu”, you can hide those with the added code I pasted above for the toggle-inner toggle-text.

Basically, for the text stuff, it hides on mobile but reappears for larger screen resolution sizes/views that are 1000px or larger.

Hopefully the above CSS code works for you…