How can i make grey line in header thicker?

[Anonymous]

Hi, I would like to make the gray line thicker in the header like here: 

like this:

https://web.archive.org/web/20240331230929/https://www.etsy.com/

my url: https://cb180d-31.myshopify.com/

Thank you.

[Sweans · Accepted solution]

Hi @Anonymous,

To add the underline please do the following:
1. Go to Online Store > Themes.
Click on Actions next to your theme and select Edit code.

2. Search file base.css and add this below code at the bottom:

.header-wrapper--border-bottom {

border-bottom: 2px solid #d4d4d4 !important;
}

Here you can adjust the value of "2px" to make the thickness apt for you and the color code "#d4d4d4" can be adjusted to change the color to any other one.

3. Save the changes and check the button.

I hope this helps! If it does, please like it and mark it as a solution!

If you need further assistance, feel free to reach out!

Regards,

Sweans

[BSSCommerce-HDL]

Hi @Anonymous, 

Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

Step 2: Search file theme.liquid

Step 3: Insert this code above </head> tag:

<style>
.header-wrapper--border-bottom {
    border-bottom: 0.3rem solid rgba(var(--color-foreground), 0.08) !important;
}
</style>

Here is result: 

Hope this can help you,

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

[Anonymous]

Thank you it's working. 

Is it possible to make the line a little thinner and in dark grey like i describe here:

[BSSCommerce-HDL · Accepted solution]

@Anonymous. Pls replace my old code to new code: 

<style>
.header-wrapper--border-bottom {
    border-bottom: 0.2rem solid #0e0e0e29 !important;
}
</style>

Hope this can help you,

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

[Anonymous]

Its working. 

Thank you! 🙂

[BSSCommerce-HDL]

@Anonymous, No problem. Glad to help you 😍

[Anonymous]

Hey, is it possible to make it only for the desktop version? I want the mobile version as i had it before.

Best regards

[BSSCommerce-HDL]

Hi @Anonymous,  Pls replace my old code to new code: 

<style>
@media only screen and (min-width: 750px) { 
   .header-wrapper--border-bottom {
      border-bottom: 0.2rem solid #0e0e0e29 !important;
   }
}
</style>

Hope this can help you,

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

[Sweans · Accepted solution]

Hi @Anonymous,

To add the underline please do the following:
1. Go to Online Store > Themes.
Click on Actions next to your theme and select Edit code.

2. Search file base.css and add this below code at the bottom:

.header-wrapper--border-bottom {

border-bottom: 2px solid #d4d4d4 !important;
}

Here you can adjust the value of "2px" to make the thickness apt for you and the color code "#d4d4d4" can be adjusted to change the color to any other one.

3. Save the changes and check the button.

I hope this helps! If it does, please like it and mark it as a solution!

If you need further assistance, feel free to reach out!

Regards,

Sweans

[Anonymous]

Thank you!