Solved

What is the fix for the bottom border color issue in Debut theme on Shopify?

yoclick
Tourist
5 0 4

Hi,

Looking for some help. We're using Debut theme and the website is www.watchcraftsman.com.

We manually changed the header colour to white as we have a black background, but didn't change within the theme settings as the background for the rest of the site is white. 

The issue we have is that the bottom-border on the links within the header highlight to black when a cursor hovers over them (the theme text colour) and not white. Can someone help me correct this?

Thanks

Accepted Solution (1)
dmwwebartisan
Shopify Partner
12280 2546 3693

This is an accepted solution.

@yoclick 

Please add the following code at the bottom of your assets/theme.css file.

.site-nav__link:focus .site-nav__label, .site-nav__link:not([disabled]):hover .site-nav__label {
border-bottom-color: #fff !important;
}

.site-nav__link--active .site-nav__label {
border-bottom-color: #fff !important;
}

 

Hope this helps.

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app

View solution in original post

Replies 5 (5)

KetanKumar
Shopify Partner
36839 3635 11972

@yoclick 

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community!😊
Thanks for your good question.

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.css ->paste below code at the bottom of the file.
this code apply for after 5 - 6 second

.template-index #site-header {border-bottom-color: transparent;}

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
yoclick
Tourist
5 0 4

Thanks

What I mean is the bottom-border of the text, which highlights (or underlines) constantly for the text of the active page, and then highlights (underlines) the other text when you hover over it. Its currently black and I need it to be white, the same colour as the text.

Color issue.jpg

 

yoclick
Tourist
5 0 4

Hi

Can anyone help with this? 

Thanks

dmwwebartisan
Shopify Partner
12280 2546 3693

This is an accepted solution.

@yoclick 

Please add the following code at the bottom of your assets/theme.css file.

.site-nav__link:focus .site-nav__label, .site-nav__link:not([disabled]):hover .site-nav__label {
border-bottom-color: #fff !important;
}

.site-nav__link--active .site-nav__label {
border-bottom-color: #fff !important;
}

 

Hope this helps.

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
yoclick
Tourist
5 0 4

Thank you so much, this works great!