Changing navigation underline weight

Hi SS Circle trust,

How can I adjust the line weight of the underline on current state navigation links? Have tried some older code, but no success.

Site: lettuce-hexagon-lw6p.squarespace.com
PW: Ruello2023!

Thank you in advance!
Rad. 🙏

1 hour ago, RAD_Design said:

Hi SS Circle trust,

How can I adjust the line weight of the underline on current state navigation links? Have tried some older code, but no success.

Site: lettuce-hexagon-lw6p.squarespace.com
PW: Ruello123!

Thank you in advance!
Rad. 🙏

Wrong password, Can you check it again?

Edited in the original post. Sorry!

My testing

Thank you @Beyondspace this worked perfectly on Desktop!

Any idea how I would adjust for mobile view also? 

Cheers!
RAD. 🙏

Use this code for mobile

.header-menu-nav-item--active .header-menu-nav-item-content {
    background-size: 1px 4px !Important;
}

@Beyondspace
This did the trick for the underline that appears under the name of the page you're on, but is there a way to transform the (growing/crawling) rollover underline to the same thickness?

Can you share your site so I can take a look?

Sure, we're still developing it, but I made it available to see with a password:

mindmedicineministry.squarespace.com
password: testing-1-2-3

On 3/23/2024 at 1:31 AM, pbjameson said:

Sure, we're still developing it, but I made it available to see with a password:

mindmedicineministry.squarespace.com
password: testing-1-2-3

You can use this CSS code

div.header-nav-item>a:after {
    height: 4px !important;
}

Excellent. Thanks, @tuanphan. Ugh, now I'm noticing there's yet another place this underline appears (in the drop-down menu), Do you have code for that? Also, is there an option to turn off these underlines at any level? I think I like it appearing for the current page, but less interested in the rollover underlines…

On 3/28/2024 at 3:50 AM, pbjameson said:

Excellent. Thanks, @tuanphan. Ugh, now I'm noticing there's yet another place this underline appears (in the drop-down menu), Do you have code for that? Also, is there an option to turn off these underlines at any level? I think I like it appearing for the current page, but less interested in the rollover underlines…

You can use this CSS code to remove it

span.header-nav-folder-item-content {
    background-image: none !important;
}

This code didn't remove any of the underlines as far as I could tell. Maybe the other code I've used (above) overwrites that? I'm still interested in being able to control the underline thickness of the dropdown items mostly, but also curious if any/all of these underlines in the nav can be turned off (in the regular settings or with custom code)?

3 hours ago, pbjameson said:

This code didn't remove any of the underlines as far as I could tell. Maybe the other code I've used (above) overwrites that? I'm still interested in being able to control the underline thickness of the dropdown items mostly, but also curious if any/all of these underlines in the nav can be turned off (in the regular settings or with custom code)?

You can try the following CSS code

.tweak-global-animations-animation-type-flex .header-nav-folder-item a::after {
  content: none;
}

Let me know how it works

Thanks @Beyondspace that bit of code did change the weight of the rollover underline on the dropdown items, but not the underline on the on-state item. So I tweaked some of the code @tuanphan shared above to cover that and got a decent result, but I don't really know what I'm doing:

.header-nav-folder-item--active .header-nav-folder-item-content {
    background-size: 1px 2px !Important;
}

(I changed the dropdown underline to 2 px because the 3 px was feeling cramped because it doesn't have the same distance from the type as the top nav items.)

There is an odd rollover "overlap" on the page in the dropdown that already has an underline (on-state) that I wish wasn't there, but it's functional:

https://www.mindmedicineministry.org/practical-classes
 

On 4/15/2024 at 9:06 PM, pbjameson said:

Thanks  that bit of code did change the weight of the rollover underline on the dropdown items, but not the underline on the on-state item. So I tweaked some of the code @tuanphan shared above to cover that and got a decent result, but I don't really know what I'm doing:

.header-nav-folder-item--active .header-nav-folder-item-content {
    background-size: 1px 2px !Important;
}

(I changed the dropdown underline to 2 px because the 3 px was feeling cramped because it doesn't have the same distance from the type as the top nav items.)

There is an odd rollover "overlap" on the page in the dropdown that already has an underline (on-state) that I wish wasn't there, but it's functional:

https://www.mindmedicineministry.org/practical-classes
 

I see it looks fine now. Did you solve all problem? Or you need to increase underline weight on dropdown items?