Jump to content

Change colour of navigation line in mobile

Go to solution Solved by tuanphan,

Recommended Posts

Hi, 

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.