Jump to content

Change colour of navigation line in mobile

Go to solution Solved by tuanphan,

Recommended Posts


I'm trying to change the color of the navigation line in mobile. I managed to takeaway the underline, and replace it with a border-bottom, just like I did in the webversion.

Turns out the divs in the mobile navigation are much wider. How can I make the line underneath the active link as wide as the text? Or should I use another method of changing the lines color? 

This is the website: https://octagon-vuvuzela-9eam.squarespace.com/

Here the things I tried so far:

// font and underline header mobile
nav.header-menu-nav-list .header-menu-nav-item * {
    background-image: none !important;
    text-decoration: none !important;
      //width: 60%;
      //text-align: left;
    //border: none !important;

.header-menu-nav-item--active a {
    border-bottom: 2.5px solid #dbff0f !important;
      //width: 40%;
      //height: 1.4em;
.header-menu-nav-item:hover a  {
    background-image: none !important;
    color: #ffffff !important;


Edited by bitsst
Link to comment
  • 6 months later...

Works for me, thanks @tuanphan here my code:

/* Mobile underline */
.header-menu-nav-item-content {
    background-image: none !important;

.header-menu-nav-item--active a  {
border-bottom: 1px solid #5fc5c2 !important;

div.container.header-menu-nav-item, div.container.header-menu-nav-item a {
display: inline-block !important;
/* Mobile underline */

Screenshot 2023-12-07 at 10.59.53.png

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.