Menu underline for linked blog category pages

Site URL: http://www.stephamaka.com

I would like to have the current page underlined in my menu when a user is on that page. I was able to do so using the below code but could not get the underline to stay for the blog category pages (e.g. lifestyle, fashion, photography). Does anyone know of a solution to this?

Current code being used: 

.Header-nav-item--active:after {
   background: #bb7939;
   height: 2px;
   width: 100px;
}

This one works for me on my site, in custom css: 

.main-nav ul li.active-link a, .main-nav ul li.active-link a:visited {
     border-bottom: 4px solid #000000;

my random views

I think underline on nav active page (SS 7.1) is default setting?