Jump to content

How to remove underline site navigation on mobile view

Go to solution Solved by tuanphan,

Recommended Posts

Site URL: https://www.aureliaregina.com/

Hello all!

My name is Regina, I have a question for site navigation when I use on mobile phone. My question is how to remove those underline when I see on mobile phone? (see screenshoot for mobile phone view) Is there any CSS code to remove this? Because when I see on desktop view, everything seems fine.

I already searched many answer on this forum, but it doesnt applicable to my squarespace website. My website is : aureliaregina.com

Please help me, any answers or coding will be appreciated. Thank you!

Screenshot 2021-03-11 at 14.54.40.png

Link to comment
  • 2 weeks later...
  • Solution
On 3/11/2021 at 3:02 PM, aureliaregina98 said:

Site URL: https://www.aureliaregina.com/

Hello all!

My name is Regina, I have a question for site navigation when I use on mobile phone. My question is how to remove those underline when I see on mobile phone? (see screenshoot for mobile phone view) Is there any CSS code to remove this? Because when I see on desktop view, everything seems fine.

I already searched many answer on this forum, but it doesnt applicable to my squarespace website. My website is : aureliaregina.com

Please help me, any answers or coding will be appreciated. Thank you!

Screenshot 2021-03-11 at 14.54.40.png

Hi. Add to Design > Custom CSS

/* remove menu underline */
div.header-menu-nav-item a {
    text-decoration: none !important;
    border: none !important;
    background-image: none !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
  • 2 weeks later...
  • 1 year later...
  • 3 weeks later...

I have this as my mobile navigation:

 

.header-menu-nav-item a {
 font-size: 2rem !important;
 text-align:left !important;
 background-color: rgba(0,0, 0, 0.4) !important;
 color: #dfe0e1 !important;
  text-decoration: none !important;
  }

 

Everything works, but the text is still underlined.

I'd also like to make the active link another color.

 

Site    https://raccoon-oarfish-szer.squarespace.com

Pwd: Largeosity

Link to comment
On 6/10/2022 at 10:40 PM, CooperBlack said:

I figured out the coloring to the active link on the mobile navigation. But I still get an underline.

 

.header-menu-nav-item--active a {
  text-decoration: none !important;
  color: #BF6403 !important;
}

Add this CSS

nav.header-menu-nav-list .header-menu-nav-item * {
    background-image: none !important;
    text-decoration: none !important;
    border: none !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.