Title: Reduce header width
Last modified: December 26, 2020

---

# Reduce header width

 *  Resolved [rod](https://wordpress.org/support/users/nomadarod/)
 * (@nomadarod)
 * [5 years, 5 months ago](https://wordpress.org/support/topic/reduce-header-width-2/)
 * Hi,
    After adding the logo, the header becomes much larger, and even when hiding
   the site title and site description and the logo becomes aligned with the menu,
   there is plenty of width that I would like to get rid off.
 * Is it a proper way to do it to simply reduce the padding in the .site-main and.
   site-header classes? Or could it bring responsiveness issues later?
 * And could the space between the logo and the menu, (which seems to be a margin
   from the menu?) be used for a title? How could I use it for site title or description?
 * The page I need help with: _[[log in](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fwordpress.org%2Fsupport%2Ftopic%2Freduce-header-width-2%2F%3Foutput_format%3Dmd&locale=en_US)
   to see the link]_

Viewing 5 replies - 1 through 5 (of 5 total)

 *  Thread Starter [rod](https://wordpress.org/support/users/nomadarod/)
 * (@nomadarod)
 * [5 years, 5 months ago](https://wordpress.org/support/topic/reduce-header-width-2/#post-13844262)
 * Hi Oliver,
 * Not quite. I am looking for keeping the logo vertically aligned with the Menu,
   as it is, but reducing the height of the header so it becomes as minimal as possible.
 * I tried this in my child-theme, but it didn’t respond. I missed something in 
   the code?:
 *     ```
       /* Header styling*/
       @media only screen and (min-width: 822px) {
   
       	.site-header, .site-main {
       		padding-top: calc(0 * var(--global--spacing-vertical));
       		padding-bottom: calc(0 * var(--global--spacing-vertical));
       	}
       }
       ```
   
 * Update: Never-mind. Emptied the browser cache and it worked.
    -  This reply was modified 5 years, 5 months ago by [rod](https://wordpress.org/support/users/nomadarod/).
    -  This reply was modified 5 years, 5 months ago by [rod](https://wordpress.org/support/users/nomadarod/).
 *  Thread Starter [rod](https://wordpress.org/support/users/nomadarod/)
 * (@nomadarod)
 * [5 years, 5 months ago](https://wordpress.org/support/topic/reduce-header-width-2/#post-13848443)
 * Thanks Oliver. I will change it.
 * Do I need to add all other [@media](https://wordpress.org/support/users/media/)
   widths so it has the same behavior in all screen sizes? And would this ask for
   some other responsiveness oriented css (I thought that’s what var() was for? )
   or I don’t have to worry?
 * Really grateful for your presence and all the support. 5 stars ^_^
 *  [Oliver Campion](https://wordpress.org/support/users/domainsupport/)
 * (@domainsupport)
 * [5 years, 5 months ago](https://wordpress.org/support/topic/reduce-header-width-2/#post-13849198)
 * If you want it to work across all devices then just remove the media queries …
   🙂
 *     ```
       .site-header, .site-main {
       	padding-top: 0;
       	padding-bottom: 0;
       }
       ```
   
 * The var() function is just to use a CSS variable. Because these are not compatible
   with older browsers I would **definitely** avoid them in your custom CSS.
 * This new theme is the first WordPress default theme that makes (a lot of) use
   of CSS variables but it still imports a completely different style sheet when
   it detects IE11 so as to be compatible.
 * Oliver
 *  Thread Starter [rod](https://wordpress.org/support/users/nomadarod/)
 * (@nomadarod)
 * [5 years, 5 months ago](https://wordpress.org/support/topic/reduce-header-width-2/#post-13849470)
 * Aaah, it was much simpler than I thought! ^_^
 * Thank you for putting it so clear. It’s a real pleasure to discover and come 
   to understand what I’m doing, to feel like I’m advancing in my site and to feel
   very reassuring to have you there to take us by the hand. Sincere gratitude.
 *  [Oliver Campion](https://wordpress.org/support/users/domainsupport/)
 * (@domainsupport)
 * [5 years, 5 months ago](https://wordpress.org/support/topic/reduce-header-width-2/#post-13850922)
 * You’re very welcome!

Viewing 5 replies - 1 through 5 (of 5 total)

The topic ‘Reduce header width’ is closed to new replies.

 * ![](https://i0.wp.com/themes.svn.wordpress.org/twentytwentyone/2.8/screenshot.
   png)
 * Twenty Twenty-One
 * [Support Threads](https://wordpress.org/support/theme/twentytwentyone/)
 * [Active Topics](https://wordpress.org/support/theme/twentytwentyone/active/)
 * [Unresolved Topics](https://wordpress.org/support/theme/twentytwentyone/unresolved/)
 * [Reviews](https://wordpress.org/support/theme/twentytwentyone/reviews/)

## Tags

 * [header-width](https://wordpress.org/support/topic-tag/header-width/)
 * [logo](https://wordpress.org/support/topic-tag/logo/)
 * [site description](https://wordpress.org/support/topic-tag/site-description/)
 * [site title](https://wordpress.org/support/topic-tag/site-title/)

 * 5 replies
 * 2 participants
 * Last reply from: [Oliver Campion](https://wordpress.org/support/users/domainsupport/)
 * Last activity: [5 years, 5 months ago](https://wordpress.org/support/topic/reduce-header-width-2/#post-13850922)
 * Status: resolved