How do I remove header border from home page only?

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!

1 Like

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

1 Like

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;
}
1 Like

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 tag and paste the code below before the tag.
{% if template.name == 'index' %}

{% endif %}

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

1 Like

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

{% 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

Thank you so much!