Force a link to be "active" even if not active or a folder

For this site: https://limonella.squarespace.com/ (password: limonella), the client would like the feature of the highlighted navigation that is active to also work on 'Shop' and 'Journal'. Shop is a folder with consisting of pages, shop and links. Journal is just a blog summary type page, but she would like Journal to be active when any blog post is active.

I believe there is a way with javascript to do this, but this is beyond my level of expertise. I would appreciate any help!

Thanks so much!

@jodineufeld Add to Home > Design > Custom CSS

/* Active Journal item when blog post */
.collection-type-blog.view-item .Header-nav-item:nth-child(3):after {
    content: '';
    background: #f6d4ce;
    height: 6px;
    width: 0;
    display: block;
    margin-top: -6px !important;
    transition: width 1s;
    margin: 0 auto;
    width:100%;
}
/* Shop Page */
body#collection-5d6596a273f1e00001d6fec0 .Header-nav-item:first-child:after {
    content: '';
    background: #f6d4ce;
    height: 6px;
    width: 0;
    display: block;
    margin-top: -6px !important;
    transition: width 1s;
    margin: 0 auto;
    width:100%;
}

Thanks so much @tuanphan for taking the time to answer my question! That solution is working for the journal, but for the Shop it only highlights Shop when the first drop down option is selected and no others. Would you be able to advise how to make it work on all drop downs for the Shop?

@jodineufeld

.collection-type-products.view-list .Header-nav-item:first-child:after {
    content: '';
    background: #f6d4ce;
    height: 6px;
    width: 0;
    display: block;
    margin-top: -6px !important;
    transition: width 1s;
    margin: 0 auto;
    width:100%;
}
body#collection-5d6596a273f1e00001d6fec0 .Header-nav-item:first-child:after {
    content: '';
    background: #f6d4ce;
    height: 6px;
    width: 0;
    display: block;
    margin-top: -6px !important;
    transition: width 1s;
    margin: 0 auto;
    width:100%;
}