I want to minimize the header height and also want to align the logo in center

[officialglowgame]

here is my store URL : https://glowgame.in/

[AiTrillion]

Hello @officialglowgame ,

I hope you are well!

Please copy and paste the below code to the top of base.css or theme.css. To find base.css or theme.css, go to Online store >> Themes >> Edit code and search for either base.css or theme.css

Alternatively, if the code didn’t work, copy and paste the code below by going to the Online store >> Themes >> Customize >> Click on Settings icon to the left >> Scroll down to the bottom and paste it to the custom CSS tab.

@media screen and (max-width: 767px) {
.col-logo {
flex: 2;
}
.d-flex.d-lg-none.toggle-menu-mobile.align-items-center {
justify-content: left;
}

}

[Asiko_Dev]

Here’s how you can reduce the header height and keep your logo centered in your Shopify store’s header (like in your screenshot at glowgame.in).

---

Step 1: Duplicate the Theme

Go to Online Store → Themes → … → Duplicate your current theme to keep a safe backup before editing.

---

Step 2: Edit the CSS

1. Go to Online Store → Themes → … → Edit code.

2. Open Assets → base.css (or sometimes theme.css / global.css depending on your theme).

3. Scroll to the very bottom and paste this code:

/* === Reduce Header Height & Center Logo === */

/* Adjust the header padding (reduce height) */
header.site-header,
.header-wrapper {
  padding-top: 10px;     /* reduce top space */
  padding-bottom: 10px;  /* reduce bottom space */
  min-height: 70px;      /* adjust height as needed */
}

/* Center the logo */
.header__heading,
.header__heading-link img,
.logo,
.header__logo {
  display: block;
  margin: 0 auto;        /* centers logo */
  max-height: 70px;      /* reduces logo size if too tall */
}

/* Optional: Adjust navigation alignment if needed */
.header__menu {
  align-items: center;
}

---

Step 3: Adjust Logo Size

• If your logo still looks too large, reduce the max-height value above (e.g., 60px or 50px).

• You can also upload a smaller version of your logo in Online Store → Customize → Header → Logo settings.

---

Step 4: Save & Preview

• Click Save and preview the site.

• Your header should now be slimmer with the logo centered.

---

Tips

• If your theme uses a different header class, right-click the header in your browser → Inspect → look for classes like .header, .site-header, .header-wrapper, or .logo.

• Replace these class names in the CSS if necessary.

[tim_1]

This code can go into “Custom CSS” of the Header section in Customizer. You can also tune the logo size in the settings of the Header section too.

header .header-top__wrap {
  padding: 5px 0 0 0 !important;
}

header .site-nav__link {
  padding: 15px 15px 10px;
}

[The_ScriptFlow]

Hey @officialglowgame,

In order to minimize the height of the header, requires to implement the different css. First we need to reduce the size of the logo, then reduce the padding from the top and bottom to ensure that it has the min height as possible.

In order to implement all this you need to follow these steps.

Go to Shopify Admin >> Online Store >> Themes >> Edit Code >> theme.css

In the end of theme.css file paste the following code.

.site-header__logo img {
  width: 60px;
}
.header-top__wrap.d-flex.py-3.align-items-center.w-100 {
  padding-top: 0.5rem !important;
  padding-bottom: 0.5rem !important;
}
.site-nav__link {
  padding-top: 8px !important;
  padding-bottom: 8px !important;
}

Results:

If you need more help then let me know.
Thanks

[officialglowgame]

how can i wrap navigations in mobile view

[officialglowgame]

like this.

[officialglowgame]

can you solve this issue

[The_ScriptFlow]

Yeah,

But I require your store collab code.

Please share it in the p/m.

Thanks

[officialglowgame]

okay so where i can share collab code

[The_ScriptFlow]

Click on my profile and then click on message.

[officialglowgame]

can i share on whatsapp

[The_ScriptFlow]

Yes. Sure. You can send over it.