Have your say in Community Polls: What was/is your greatest motivation to start your own business?

Re: How can i make grey line in header thicker?

Solved

How can i make grey line in header thicker?

Not applicable

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

 

Unbenannt.png

like this:

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

 

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

 

Thank you.

Accepted Solutions (2)

Sweans
Shopify Partner
428 88 126

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

- Was my reply helpful? Please Like and Accept the Solution or let me know by Buying me coffee!
- Want to modify or custom changes on store Hire me.
- Feel free to contact me at info@sweans.com regarding any help.
- To know more about me check out www.sweans.com

View solution in original post

BSSCommerce-HDL
Shopify Partner
2305 834 908

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

Sale banner, pop ups: Customize your sale banner, pop-ups and create countdown bar to boost conversion rate.
Simicart: Transform your Shopify store into a stunning and fully functional mobile app with just a few simple steps.
Product Labels & Badges:
Get more sales with striking labels, badges, and banners from our 10,000+ available templates.

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

View solution in original post

Replies 9 (9)

BSSCommerce-HDL
Shopify Partner
2305 834 908

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: 

BSSCommerceHDL_0-1725938233310.png

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 😍

Sale banner, pop ups: Customize your sale banner, pop-ups and create countdown bar to boost conversion rate.
Simicart: Transform your Shopify store into a stunning and fully functional mobile app with just a few simple steps.
Product Labels & Badges:
Get more sales with striking labels, badges, and banners from our 10,000+ available templates.

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

Not applicable

Thank you it's working. 

 

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

4324234.png

BSSCommerce-HDL
Shopify Partner
2305 834 908

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

Sale banner, pop ups: Customize your sale banner, pop-ups and create countdown bar to boost conversion rate.
Simicart: Transform your Shopify store into a stunning and fully functional mobile app with just a few simple steps.
Product Labels & Badges:
Get more sales with striking labels, badges, and banners from our 10,000+ available templates.

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

Not applicable

Its working. 

 

Thank you! 🙂

BSSCommerce-HDL
Shopify Partner
2305 834 908

@Anonymous, No problem. Glad to help you 😍

Sale banner, pop ups: Customize your sale banner, pop-ups and create countdown bar to boost conversion rate.
Simicart: Transform your Shopify store into a stunning and fully functional mobile app with just a few simple steps.
Product Labels & Badges:
Get more sales with striking labels, badges, and banners from our 10,000+ available templates.

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

Not applicable

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
Shopify Partner
2305 834 908

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 😍

 

 

Sale banner, pop ups: Customize your sale banner, pop-ups and create countdown bar to boost conversion rate.
Simicart: Transform your Shopify store into a stunning and fully functional mobile app with just a few simple steps.
Product Labels & Badges:
Get more sales with striking labels, badges, and banners from our 10,000+ available templates.

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

Sweans
Shopify Partner
428 88 126

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

- Was my reply helpful? Please Like and Accept the Solution or let me know by Buying me coffee!
- Want to modify or custom changes on store Hire me.
- Feel free to contact me at info@sweans.com regarding any help.
- To know more about me check out www.sweans.com

Not applicable

Thank you!