Jump to content

Changing navigation underline weight

Go to solution Solved by Beyondspace,

Recommended Posts

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?

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
  • Solution

You can try adding to Home > Design> Custom Css

body:not(.header--menu-open) .header-nav-item--active>a {
  background-size: 1px 4px;
}

Press 👍 or mark this answer as solution to help another one too

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment

My testing

image.png.d04a941401fd83b41a00c947ed4854b3.png

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
  • 1 year later...

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

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
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;
}

 

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

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…

Screenshot 2024-03-27 at 12.18.45 PM.png

Link to comment
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…

Screenshot 2024-03-27 at 12.18.45 PM.png

You can use this CSS code to remove it

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

 

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
  • 2 weeks later...

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)?

Link to comment
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

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment

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
 

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • 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.