Underline active on blog post

Site URL: https://apricots-reed-54hl.squarespace.com/

Hi there  

I have made a blog site with pages using the summary and tag-function to filter the blog posts.  

Is it possible that the underline in the main navigation menu stays active, when one clicks on a blog post? 

Site: https://apricots-reed-54hl.squarespace.com/
PW: webolsson  

Thank you very much.  
Alastair

Which menu item are you referring to?

Hi Tuanphan

Thanks. 

All three. So when I click on a blogpost under DESIGN (or ARTWORK, PHOTOGRAPHY), the underline stays? So the viewer can see which category one is on. I have attached an image. 

Hope it makes sense. 

Thanks. 

On 9/16/2024 at 6:55 PM, halfhide said:

Hi Tuanphan

Thanks. 

All three. So when I click on a blogpost under DESIGN (or ARTWORK, PHOTOGRAPHY), the underline stays? So the viewer can see which category one is on. I have attached an image. 

Hope it makes sense. 

Thanks. 

You will need to add code to all blog posts

First, with Design

https://apricots-reed-54hl.squarespace.com/design

Edit 4 Posts belong Design > Add a Block > Choose Code > paste this code

<style>
  header#header a[href="/design"] {
    background-image: linear-gradient(currentColor, currentColor);
    background-repeat: repeat-x;
    background-size: 1px 1px;
    background-position: 0 100% !important;
}
</style>

You can try then if it works, I will send code for remain pages

That's great - it worked! Thanks! 

And if I want to style it, so it is a little thicker and more top-padding, do I add code the same place?

18 hours ago, halfhide said:

That's great - it worked! Thanks! 

And if I want to style it, so it is a little thicker and more top-padding, do I add code the same place?

You can adjust these lines

Great! Thanks. 

And now that I have you. Is there a way to keep the underline under the letters, so it doesn't stick out on either side. See attached. 

Thanks!

Hi there. Do you know how to adjust this? Thanks!

It was harder than I thought

You can use this extra CSS code

.header-nav-item--active a {
  width: calc(~"100% - 3px") !important;
}