Title: Vertically Centered Header
Last modified: May 31, 2025

---

# Vertically Centered Header

 *  Resolved [pranaman](https://wordpress.org/support/users/pranaman/)
 * (@pranaman)
 * [12 months ago](https://wordpress.org/support/topic/vertically-centered-header/)
 * I’ve been duking it out with chatGPT, trying to get my Site Title and navigation
   menu to appear on the same line in the header, both of them vertically centered.
   It provided me with some CSS, but I’m still running into issues. The site title
   looks a bit too high and isn’t perfectly vertically centered. Plus, when I hovered
   with Inspect, it looked like my Site Title is 2 sections. I think that’s ok now.
   Here’s the CSS I’m working with:
 *     ```wp-block-code
       /* Header Container */.site-header {display: flex;justify-content: space-between;align-items: center;padding: 10px 20px;min-height: 60px;}/* Company Name */.site-branding {display: flex;align-items: center;white-space: nowrap;}.site-branding .site-title {margin: 0;font-size: 1.8em;line-height: 1;}/* Navigation Menu */.main-navigation {display: flex;align-items: center;}.main-navigation ul {display: flex;gap: 20px;list-style: none;margin: 0;padding: 0;}.main-navigation li a {padding: 8px 10px;display: inline-flex;align-items: center;}/* Hide Search and Cart */.site-search,.site-header-cart {display: none !important;}/* Outer header container / .col-full { display: flex; align-items: center; / Vertically center children */justify-content: space-between;padding: 10px 20px;min-height: 60px;}/* Branding block / .site-branding { display: flex; align-items: center; / Vertically center site-title */height: 100%;}/* Site title text / .site-title { margin: 0; font-size: 1.8em; line-height: 1.2; display: flex; align-items: center; / Vertically center text */height: 100%;}
       ```
   
 * Issues:
    - The site title is still too high and doesn’t seem vertically centered within
      the header.
    - I’m not sure if something in the code is conflicting, but it’s just not quite
      right.
 * Can anyone point me in the right direction to fix this? Thank you.
 * The page I need help with: _[[log in](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fwordpress.org%2Fsupport%2Ftopic%2Fvertically-centered-header%2F%3Foutput_format%3Dmd&locale=en_US)
   to see the link]_

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

 *  [Manuel Camargo](https://wordpress.org/support/users/sirlouen/)
 * (@sirlouen)
 * [12 months ago](https://wordpress.org/support/topic/vertically-centered-header/#post-18491726)
 * Have you tried playing around with Full Site Editing (editing with blocks without
   having to deal with CSS)?
 * Or even I would suggest checking some of those editing plugins like Elementor,
   Breakdance, etc… if you feel overwhelmed with CSS.
 * By the way, this forum is not the best to talk about CSS topics, I would rather
   recommend you a more related CSS place (something maybe like stack overflow?)
 * This is a WordPress centered forum, for example, if you had some trouble with
   a certain element of Gutenberg editor we could try to find a solution.
 *  [bvbaked](https://wordpress.org/support/users/bvbaked/)
 * (@bvbaked)
 * [12 months ago](https://wordpress.org/support/topic/vertically-centered-header/#post-18491736)
 * Heya,
 * You’re very close with everything, just there is one margin that is still causing
   problems
 *     ```wp-block-code
       .site-branding,  .site-search,  .site-header-cart,  .site-logo-anchor,  .site-logo-link,  .custom-logo-link {    margin-bottom:1.41575em;  }
       ```
   
 * This is where it is coming from in your styles.css file, specifically the .site-
   branding selector here. That adds extra spacing under your site site, making 
   it a little larger than it should be so the vertical align is off
 * I don’t know what the others effect, but would be worth testing out if removing
   the first selector works to fix your issue while keeping everything else as you
   want
 *  [Anil Ankola](https://wordpress.org/support/users/anilankola/)
 * (@anilankola)
 * [12 months ago](https://wordpress.org/support/topic/vertically-centered-header/#post-18491879)
 * Hi [@pranaman](https://wordpress.org/support/users/pranaman/)
 * try this css code
 * .site-header .col-full {
   margin: 0px;}
 * .woocommerce-active .site-header .site-branding {
   margin-bottom: 0;}
    -  This reply was modified 12 months ago by [Anil Ankola](https://wordpress.org/support/users/anilankola/).
 *  Moderator [t-p](https://wordpress.org/support/users/t-p/)
 * (@t-p)
 * [12 months ago](https://wordpress.org/support/topic/vertically-centered-header/#post-18492457)
 * If still running into problem, I recommend asking at your `storefront` theme’s
   dedicated support forum [https://wordpress.org/support/theme/storefront/#new-post](https://wordpress.org/support/theme/storefront/#new-post)
   so its developers and support community can help you with this.
 *  Thread Starter [pranaman](https://wordpress.org/support/users/pranaman/)
 * (@pranaman)
 * [11 months, 3 weeks ago](https://wordpress.org/support/topic/vertically-centered-header/#post-18502276)
 * Hi all, thank you for the replies. Sorry for the delay.
 * [@sirlouen](https://wordpress.org/support/users/sirlouen/), I haven’t played 
   around with Full Site Editing afaik. I find that the top-most area, the header
   and menu area, is not very adjustable unless one involves CSS.
 * [@bvbaked](https://wordpress.org/support/users/bvbaked/), thank you. That gave
   me some ideas. I think that tied in with [@anilankola](https://wordpress.org/support/users/anilankola/)’
   s idea:
 * [@anilankola](https://wordpress.org/support/users/anilankola/), thank you, that
   did it!
 * [@t-p](https://wordpress.org/support/users/t-p/), thank you. Good idea.
 *  [Manuel Camargo](https://wordpress.org/support/users/sirlouen/)
 * (@sirlouen)
 * [11 months, 3 weeks ago](https://wordpress.org/support/topic/vertically-centered-header/#post-18502279)
 * [@pranaman](https://wordpress.org/support/users/pranaman/) judging from the CSS
   provided by [@anilankola](https://wordpress.org/support/users/anilankola/) I 
   feel you are not comfortable with CSS at all.
 * As I told you, I recommend you taking a look to Elementor or Breakdance (or many
   other builders out there) instead of asking for CSS spoon-feeding.
 * You will find its very comfortable to solve this issues by yourself without having
   to go into CSS world (just touching here and there, and ultimately you will learn
   a little of CSS because you will understand concepts more visually)
 *  Thread Starter [pranaman](https://wordpress.org/support/users/pranaman/)
 * (@pranaman)
 * [11 months, 3 weeks ago](https://wordpress.org/support/topic/vertically-centered-header/#post-18502365)
 * [@sirlouen](https://wordpress.org/support/users/sirlouen/), I am familiar with
   CSS, but, have not used it nor gone too far in depth with it in a while. I have
   used Elementor in the past.
 * I asked to be pointed in the right direction, not spoon fed. Thank you for your
   input though.

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

The topic ‘Vertically Centered Header’ is closed to new replies.

## Tags

 * [css](https://wordpress.org/support/topic-tag/css/)

 * In: [Fixing WordPress](https://wordpress.org/support/forum/how-to-and-troubleshooting/)
 * 8 replies
 * 5 participants
 * Last reply from: [pranaman](https://wordpress.org/support/users/pranaman/)
 * Last activity: [11 months, 3 weeks ago](https://wordpress.org/support/topic/vertically-centered-header/#post-18502365)
 * Status: resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics