Re: Make Header Symmetrical/Thinner

Solved

Make Header Symmetrical/Thinner

martujv
Pathfinder
154 2 35

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:

 

Captura de pantalla 2024-08-03 a las 17.16.49.png

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

Accepted Solutions (2)

BSSCommerce-B2B
Shopify Partner
1953 561 561

This is an 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

 

BSSCommerceB2B_1-1722701495173.png

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

Best Regards

 

B2B Wholesale Solution: Streamline your B2B operation with advanced features like wholesale registration forms, custom pricing.


B2B Portal, Quote, Net 30: Speed up purchasing and streamline your quotation process with advanced features like quick order, request for quote.


B2B Lock Password Protect: Easily control access to pages, products, and pricing with robust features.


BSS Commerce - Full-service eCommerce Agency I Use Shopify for 1$ in the first month now

View solution in original post

BSS-TekLabs
Shopify Partner
2350 688 806

This is an 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

BSSTekLabs_0-1722701817907.png

We hope this assists in resolving the issue.

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

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.


Salepify: Efficiently increase sales conversion with sale-driven features like auto add to cart, free gifts (free plan available)


Salemate: Boost your AVO with 2-layer offer, countdown upsell in your post purchase page


BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now

View solution in original post

Replies 7 (7)

BSSCommerce-B2B
Shopify Partner
1953 561 561

This is an 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

 

BSSCommerceB2B_1-1722701495173.png

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

Best Regards

 

B2B Wholesale Solution: Streamline your B2B operation with advanced features like wholesale registration forms, custom pricing.


B2B Portal, Quote, Net 30: Speed up purchasing and streamline your quotation process with advanced features like quick order, request for quote.


B2B Lock Password Protect: Easily control access to pages, products, and pricing with robust features.


BSS Commerce - Full-service eCommerce Agency I Use Shopify for 1$ in the first month now

martujv
Pathfinder
154 2 35

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
Shopify Partner
2350 688 806

This is an 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

BSSTekLabs_0-1722701817907.png

We hope this assists in resolving the issue.

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

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.


Salepify: Efficiently increase sales conversion with sale-driven features like auto add to cart, free gifts (free plan available)


Salemate: Boost your AVO with 2-layer offer, countdown upsell in your post purchase page


BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now
martujv
Pathfinder
154 2 35

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
Shopify Partner
2350 688 806

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

BSSTekLabs_0-1722703140701.png

We hope this assists in resolving the issue.

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

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.


Salepify: Efficiently increase sales conversion with sale-driven features like auto add to cart, free gifts (free plan available)


Salemate: Boost your AVO with 2-layer offer, countdown upsell in your post purchase page


BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now
martujv
Pathfinder
154 2 35

It worked, thank you!

BSS-TekLabs
Shopify Partner
2350 688 806

You're welcome! 😊

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.


Salepify: Efficiently increase sales conversion with sale-driven features like auto add to cart, free gifts (free plan available)


Salemate: Boost your AVO with 2-layer offer, countdown upsell in your post purchase page


BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now