Make Header Symmetrical/Thinner

[martujv]

Hello!

Basically I want to make my header thinner (individually for mobile and desktop versions)

For some reason the upper part of the header is bigger than the lower part, which makes it look asymmetric.

I attach a photo for reference:

As it can be seen, the upper part is bigger than the lower part inside the header, which makes the icons and logo being closer to the bottom of the header, when it should be exactly in the center (vertically).

Is there any code to adjust the height of the header and make it look symmetrical and centered? (both on mobile and desktop versions, with different codes for each)

My website is https://n6ia1fdm0ovh4srq-60150284501.shopifypreview.com and my theme is Stiletto

[BSSCommerce-B2B · Accepted solution]

Hi @martujv,
follow these steps 

Step 1. Go to Admin -> Online store -> Theme > Edit code

Step 2. Find the file base.css
Step 3: At the end of the file, add this code:

@media (min-width: 960px){
  .header{
    padding-top:0!important;
  }
}

Your header will look like this

If it helps you, please like and mark it as the solution.

Best Regards

[BSSCommerce-B2B · Accepted solution]

Hi @martujv,
follow these steps 

Step 1. Go to Admin -> Online store -> Theme > Edit code

Step 2. Find the file base.css
Step 3: At the end of the file, add this code:

@media (min-width: 960px){
  .header{
    padding-top:0!important;
  }
}

Your header will look like this

If it helps you, please like and mark it as the solution.

Best Regards

[martujv]

It's almost good but this way there is a small gap between the header and the top of the page, is there any way to fix that and adjust the header to the top?

[BSS-TekLabs · Accepted solution]

Hi @martujv,

Here are the steps you can follow:

1, Navigate to Online Store > Themes > Edit Code.

2, Locate and open the base.css (or theme.css, custom.css) file.

3, Paste the code snippet provided below at the bottom of the file, then save your changes.

header.header {
    padding: 0 !important;
}

Here is the result

We hope this assists in resolving the issue.

If you find our solution helpful, kindly consider Liking and Marking it as Accepted. Thank you!

[martujv]

It's almost good but this way there is a small gap between the header and the top of the page, is there any way to fix that and adjust the header to the top?

[BSS-TekLabs]

Here is the code to make the small gap disappear

.shopify-section-group-header-group.header__outer-wrapper {
    top: 0 !important;
}

Here is the result

We hope this assists in resolving the issue.

If you find our solution helpful, kindly consider Liking and Marking it as Accepted. Thank you!

[martujv]

It worked, thank you!

[BSS-TekLabs]

You're welcome! 😊