Change colour of navigation line in mobile

Hi, 

I'm trying to change the color of the navigation line in mobile. I managed to takeaway the underline, and replace it with a border-bottom, just like I did in the webversion.

Turns out the divs in the mobile navigation are much wider. How can I make the line underneath the active link as wide as the text? Or should I use another method of changing the lines color? 

This is the website: https://octagon-vuvuzela-9eam.squarespace.com/

Here the things I tried so far:

// font and underline header mobile
nav.header-menu-nav-list .header-menu-nav-item * {
    background-image: none !important;
    text-decoration: none !important;
      //width: 60%;
      //text-align: left;
    //border: none !important;
}

.header-menu-nav-item--active a {
    border-bottom: 2.5px solid #dbff0f !important;
      //width: 40%;
      //height: 1.4em;
}
.header-menu-nav-item:hover a  {
    background-image: none !important;
    color: #ffffff !important;
}

I don't see underline. Can you add it?

2 hours ago, tuanphan said:

I don't see underline. Can you add it?

I have turned it on again! 

It's a bottom-border of the div, I've turned off the text-decoration.

1 hour ago, bitsst said:

I have turned it on again! 

It's a bottom-border of the div, I've turned off the text-decoration.

It looks like this

Works for me, thanks @tuanphan here my code:

/* Mobile underline */
.header-menu-nav-item-content {
    background-image: none !important;
}

.header-menu-nav-item--active a  {
border-bottom: 1px solid #5fc5c2 !important;
}

div.container.header-menu-nav-item, div.container.header-menu-nav-item a {
display: inline-block !important;
}
/* Mobile underline */