How to remove underline site navigation on mobile view

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!

OMG! IT'S WORKED ! 

Thank you for replying my message. Finally it's work to remove the underline menu. Thank you so much tuanphan ! for helping me 😄

THANK YOU Tuanphan  - this just helped me too!

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

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;
}

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;
}

Thank you very much!

On 6/13/2022 at 4:28 AM, tuanphan said:

Add this CSS

nav.header-menu-nav-list .header-menu-nav-item * {
    background-image: none !important;
    text-decoration: none !important;
    border: none !important;
}

 

Hey when I add this code, it gets rid of the underline but also the dropdown arrow any idea how to remove JUST the underline and not the arrow?

On 3/1/2023 at 2:28 AM, cherylr said:

Hey when I add this code, it gets rid of the underline but also the dropdown arrow any idea how to remove JUST the underline and not the arrow?

Use this

nav.header-menu-nav-list .header-menu-nav-item a {
    background-image: none !important;
    text-decoration: none !important;
    border: none !important;
}

Thank you! I didn't see your reply until just now. Your help is greatly appreciated!