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!

@tuanphan
 

I have a similar problem. I used the following code to remove underline and add a custom font for active links in the navigation which works perfectly on desktop. However it does not translate into mobile. Could you maybe help?

here is the code:

body:not(.header--menu-open) .header-nav-item--active > a,
body:not(.header--menu-open) .header-nav-folder-item--active .header-nav-folder-item-content {
  background-image: none;
  font-family: 'Saol-light-italic'; 
}

My website is: www.ofatomsandlines.com 

On 11/16/2024 at 2:19 AM, JelenaDonko said:

@tuanphan
 

I have a similar problem. I used the following code to remove underline and add a custom font for active links in the navigation which works perfectly on desktop. However it does not translate into mobile. Could you maybe help?

here is the code:

 

body:not(.header--menu-open) .header-nav-item--active > a,
body:not(.header--menu-open) .header-nav-folder-item--active .header-nav-folder-item-content {
  background-image: none;
  font-family: 'Saol-light-italic'; 
}

 

My website is: www.ofatomsandlines.com 

You can use this CSS code

nav.header-menu-nav-list [aria-current="page"] div {
    background-image: none !important;
    font-family: 'Saol-light-italic' !important;
}

On 11/19/2024 at 11:18 AM, tuanphan said:

You can use this CSS code

nav.header-menu-nav-list [aria-current="page"] div {
    background-image: none !important;
    font-family: 'Saol-light-italic' !important;
}

 

It worked out perfectly! thank you so much!

The dropdown folder "Works" still shows an underline on mobile and does not appear in the custom italic font when one of the subpages (2024, 2023, 2022, 2021) is active. Is there a possibility to include the "Works" as well? The subpages work just fine. 

Thank you as always!

18 hours ago, JelenaDonko said:

It worked out perfectly! thank you so much!

The dropdown folder "Works" still shows an underline on mobile and does not appear in the custom italic font when one of the subpages (2024, 2023, 2022, 2021) is active. Is there a possibility to include the "Works" as well? The subpages work just fine. 

Thank you as always!

With Work dropdown, use this code

:is([aria-current="page"], [aria-current="true"]) .header-menu-nav-item-content {
    background-image: none !important;
}

Amazing, thank you so much! @tuanphan