Jump to content

Underlining text in submenu

Recommended Posts


My question is about the header/upper menu.

I have managed to set the colour to dropdown/submenu as I preferred using this code:

.header-nav-folder-content {
    background: rgba(0,0,0,0.05) !important;

And I have been able to underline the title of the page or subpage that is currently being hovered over with this code:


nav a::after {

  border-bottom: 0.5px solid #000000;

  content: '';

  display: block;

  position: relative;

  width: 0%;


nav a:hover::after,

nav .current-menu-item a::after {

  width: 100%;



I would like to tweak the last code a bit, so that only where there is text, there will be a line under it. 

Now, even if there is just one word, the underline takes the full width of the textbox/of the dropdown menu.

See attached screenshot. I would like the line only to be under the action text: "praktische zaken" 


Thank you in advance!

Schermafbeelding 2021-12-23 om 12.07.53.png

Link to comment

Please post the URL for a page on your site where we can see your issue.

If your site is not public please set up a site-wide password, if you've not already done so.

Post the password here.

Adding a site-wide password is not a security breach. Please read the documentation at the link provided to understand how it works.

Please read the documentation at the link provided on how to share a link to your site to understand how it works. A link to the backend of the your site won’t work for us, i.e. a url that contains /config/.

We can then take a look at your issue.


Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment
15 hours ago, Groei said:

url is https://www.groei-praktijk.nl with password Degroeipraktijk

Add to Design > Custom CSS

/* underline width */
.header-nav-folder-item a {
    display: inline-block !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

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.