Collapse Header

  • Resolved eprowe

    (@eprowe)


    2 years ago

    Is there a way using either CSS or a child theme to reduce the height of the header to the point where is appears the social icons, site title, and search form are in alignment? I’m not the best with CSS and have been beating my head against the wall trying to figure it out.

    My thoughts are there are the three elements within the parent container/div. I want the site-title div text to remain centered with respect to the page. Then float the social media icons to the left and search form container to the right. I can get them in alignment but most times the title is all out of whack not being centered or the other two elements are not correct.

    Thanks for any feedback you can provide while I continue trying to hammer this out. I’d provide a page to look at, but unfortunately I’m working on a localhost dev machine.

Viewing 2 replies - 1 through 2 (of 2 total)
  • Theme Author Ben Sibley

    (@bensibley)

    Hey there,

    This was pretty complicated to get right, so I don’t blame you haha. Thankfully, Flexbox now has wide browser support, which wasn’t true when Unlimited was first released.

    Here’s a code snippet that should work well for your site:

    @media all and (min-width: 600px) {

.header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 24px 0;
}
.site-header .social-media-icons,
.site-header .search-form-container {
	width: 25%;
}
.site-header .social-media-icons {
	order: 1;
}
.title-container {
	margin: 0;
	order: 2;
	width: 50%;
}
.site-header .search-form-container {
	order: 3;
}

}
    Thread Starter eprowe

    (@eprowe)

    Absolutely beautiful, and much more mobile friendly than the hack I managed to put together after a 15 minute break and my original post. Ain’t that how it always works?

    I made a few minor adjustments to fine tune the appearance to get exactly what I wanted. Here is the final CSS for anyone who sees this in the future.

    @media all and (min-width: 600px) {

.header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 24px 0;
}
.site-header {
	padding: 0 3.125% 0;
}
.site-header .social-media-icons,
.site-header .search-form-container {
	width: 25%;
	margin: 0;
}
.site-header .social-media-icons {
	order: 1;
}
.title-container {
	margin: 0;
	order: 2;
	width: 50%;
}
.site-header .search-form-container {
	order: 3;
}
}
Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Collapse Header’ is closed to new replies.