Underline on top navigation when on the page

Site URL: https://www.kitaken.co.uk/

Does anyone know how to have the active page underlined in a particular colour in the top navigation? I'm using a Brine template and can't seem to get the code working. 

Thanks in advance!

Add to Home > Design > Custom CSS

.Header-nav-item--active {
    border-bottom: 1px solid black;
}

Thanks so much for your quick reply. This code doesn't work, unfortunately. 

2 minutes ago, Kitaken said:

Thanks so much for your quick reply. This code doesn't work, unfortunately. 

I see it worked here?

Ah, yes! Thank you. But is it possible to have it work on the starting page, which in my case is "shop"? It doesn't seem to underline when the nav item has a drop down e.g., when "product/price info" is active. 

9 minutes ago, Kitaken said:

Ah, yes! Thank you. But is it possible to have it work on the starting page, which in my case is "shop"? It doesn't seem to underline when the nav item has a drop down e.g., when "product/price info" is active. 

with dropdown, use

.Header-nav-folder-title--active {
    border-bottom: 1px solid black;
}
.Header-nav-folder-item--active {
    border-bottom: 1px solid black;
}

That worked for the dropdown! But how do I get both of them to work, since every item doesn't have a dropdown? "Contact" and "About" are not underlined when selected. 

On 2/13/2020 at 9:04 AM, tuanphan said:

Add to Home > Design > Custom CSS

.Header-nav-item--active {
    border-bottom: 1px solid black;
}

 

Hi @tuanphan, I have the same question! I've added this code to my custom CSS, but I think it's not working. Did I do anything wrong? The site is sensus.team pw: sensus2022

Thanks so much!

12 hours ago, barbudo said:

Hi @tuanphan, I have the same question! I've added this code to my custom CSS, but I think it's not working. Did I do anything wrong? The site is sensus.team pw: sensus2022

Thanks so much!

The code for SS 7.1. Your site is 7.0, should need to use this code

/* active nav item border */
div.active span {
    border-bottom: 1px solid;
}
.overlay-nav-container div.active a {
    border-bottom: 1px solid;
    display: inline-block;
}

15 hours ago, tuanphan said:

The code for SS 7.1. Your site is 7.0, should need to use this code

Beautiful! Thank you so much.