Title: Collapse Header
Last modified: February 17, 2023

---

# Collapse Header

 *  Resolved [eprowe](https://wordpress.org/support/users/eprowe/)
 * (@eprowe)
 * [3 years, 3 months ago](https://wordpress.org/support/topic/collapse-header/)
 * 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](https://wordpress.org/support/users/bensibley/)
 * (@bensibley)
 * [3 years, 3 months ago](https://wordpress.org/support/topic/collapse-header/#post-16480993)
 * Hey there,
 * This was pretty complicated to get right, so I don’t blame you haha. Thankfully,
   [Flexbox](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/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:
 *     ```wp-block-code
       @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](https://wordpress.org/support/users/eprowe/)
 * (@eprowe)
 * [3 years, 3 months ago](https://wordpress.org/support/topic/collapse-header/#post-16481805)
 * 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.
 *     ```wp-block-code
       @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.

 * ![](https://i0.wp.com/themes.svn.wordpress.org/unlimited/1.48/screenshot.png)
 * Unlimited
 * [Support Threads](https://wordpress.org/support/theme/unlimited/)
 * [Active Topics](https://wordpress.org/support/theme/unlimited/active/)
 * [Unresolved Topics](https://wordpress.org/support/theme/unlimited/unresolved/)
 * [Reviews](https://wordpress.org/support/theme/unlimited/reviews/)

 * 2 replies
 * 2 participants
 * Last reply from: [eprowe](https://wordpress.org/support/users/eprowe/)
 * Last activity: [3 years, 3 months ago](https://wordpress.org/support/topic/collapse-header/#post-16481805)
 * Status: resolved