How do I remove header border from home page only?

[kbtyau]

Hi, 

Just wanting to know how to remove the bottom border of my header on my home page only, i'd like it on all other pages - please let me know if there is other information I need to provide 

my store is: https://www.kbty.com.au/ 

password: teethu 

Thanks in advance! 

[Huptech-Web]

Hello! @kbtyau Please follow these steps to add this CSS code:

1. Go to your Online Store
2. Click on "Themes"
3. Select "Edit code"
4. Open your CSS file. If you have a custom CSS file, open that instead.
5. If you can't find your custom CSS file, open "theme.css"
6. Add the following code at the end of the file.

body .toolbar.has-border:before, body .theme__header.has-border:before{
    display: none;
}

If you need further assistance, please let me know. If you found my help useful, consider liking this message and marking it as the Accepted Solution.
Best regards
K.K

[EvinceDev]

Hello @kbtyau , You need to add this class in body tag for homepage only so this will remove border on home page only

.home .theme__header::before {
   display: none;
}

[Made4uo-Ribe]

Hi @kbtyau 

Try this one. 

1. From your Shopify admin dashboard, click on "Online Store" and then "Themes"
2. Find the theme that you want to edit and click on "Actions" and then "Edit code".
3. In the "theme. Liquid" file. Find the </body> tag and paste the code below before the tag. 

{% if template.name == 'index' %}
<style>
.theme__header.has-border:before {
    border: none;
}
</style>
{% endif %}

• And Save. 
• Result:
  

Your Feedback Matters! Please mark the solution and give likes to posts that helped you. Your appreciation fuels our motivation to assist you better! 

[DaisyVo · Accepted solution]

Hi @kbtyau 

To complete your requests, please follow these steps:

Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code
Step 2: Search file theme.liquid
Step 3: Insert this code above </head>

{% if template.name == "index" %}
{% style %}
header.theme__header.has-border::before {
    border: none !important;
}
{% endstyle %}
{% endif %}

Here is the result: https://prnt.sc/CvV4tIxP-gH7 

I hope this helps

Best,

Daisy

[kbtyau]

Thank you so much!