Jump to content

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

Recommended Posts

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!

Link to comment
  • Replies 3
  • Views 388
  • Created
  • Last Reply

@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%;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

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?

 

Link to comment

@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%;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.