Jump to content

Change colour of navigation line in mobile

Go to solution Solved by tuanphan,

Recommended Posts

Posted (edited)


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
2 hours ago, tuanphan said:

I don't see underline. Can you add it?


I have turned it on again! 

It's a bottom-border of the div, I've turned off the text-decoration.

Link to comment
  • Solution

Add this to Design > Custom CSS

div.container.header-menu-nav-item, div.container.header-menu-nav-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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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.