Vertically Centered Header

Resolved

(@pranaman)

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:

/* 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 to see the link]

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

Manuel Camargo
(@sirlouen)

12 months ago

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
(@bvbaked)

12 months ago
Heya,

You’re very close with everything, just there is one margin that is still causing problems
```
.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
(@anilankola)

12 months ago
Hi @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.
Moderator t-p
(@t-p)

12 months ago

If still running into problem, I recommend asking at your storefront theme’s dedicated support forum https://ww.wp.xz.cn/support/theme/storefront/#new-post so its developers and support community can help you with this.

Thread Starter pranaman
(@pranaman)

11 months, 3 weeks ago

Hi all, thank you for the replies. Sorry for the delay.

@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, thank you. That gave me some ideas. I think that tied in with @anilankola’s idea:

@anilankola, thank you, that did it!

@t-p, thank you. Good idea.

Manuel Camargo
(@sirlouen)

11 months, 3 weeks ago

@pranaman judging from the CSS provided by @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
(@pranaman)

11 months, 3 weeks ago

@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.