Removing underline from navigation on 7.1

On 6/21/2022 at 8:18 PM, tuanphan said:

Use this

header#header a:not(.btn), header#header a:not(.btn) span {
	background-image: none !important;
}

 

Hey @tuanphan! Thank you, but no luck! This code is now live on the site, but the underline still appears on both desktop and mobile 😬

3 hours ago, PatrickJ said:

the underline still appears on both desktop and mobile

Add the following to Design > Custom CSS.

body:not( .header--menu-open ) .header-nav-item--active > a {

  background-image : unset;
  
  }

:is( [aria-current="page" ], [aria-current="true"] ) .header-menu-nav-item-content {

  background-image : unset;
  
  }

This is for v7.1 and specific to the posters need.

Let us know how it goes.

42 minutes ago, creedon said:

Add the following to Design > Custom CSS.

.tweak-global-animations-animation-type-flex .header-nav-item--active:not( .header-nav-item--folder ) a::after {

  transform : scalex( 0 );
  
  }

:is( [aria-current="page" ], [aria-current="true"] ) .header-menu-nav-item-content {

  background-image : unset;
  
  }

This is for v7.1 and specific to the posters need.

Let us know how it goes.

Brilliant! That worked for mobile, which I think should be good enough for the client, that's mostly what she was concerned about! Still no luck on desktop though 😞

Thanks so much!

39 minutes ago, PatrickJ said:

Still no luck on desktop though

I updated my code.

Let us know how it goes.

Hi guys, 

The code worked perfectly to remove the underline. Do you know what code I need to make the active link change colour slightly? I'm rebuilding this site for my client on 7.1 instead of 7 but they want the header nav to work the same. So far I've removed the underline that 7.1 makes the active link have, but I need to imitate the slightly grey active nav link. Thoughts?

Here's the 7 site - https://www.treology.co.nz/

Here's the 7.1 site that I need to make the active link change colour. 

https://seal-potato-w634.squarespace.com/ - Password is TEST. 

I do love 7.1 but I really miss some of the things that they're removed  - I mean why on earth remove this option?

Thanks in advance. 

Jodi

34 minutes ago, MadebyMarkham said:

I need to imitate the slightly grey active nav link. Thoughts?

It appears you solved this issue?

On 8/6/2022 at 10:46 AM, creedon said:

It appears you solved this issue?

Hey! Yes, sorry I managed to find the code somewhere. Sorry it's taken me so long to reply... building this website for my client is taking over my life!

On 6/25/2022 at 2:40 AM, creedon said:

Add the following to Design > Custom CSS.

body:not( .header--menu-open ) .header-nav-item--active > a {

  background-image : unset;
  
  }

:is( [aria-current="page" ], [aria-current="true"] ) .header-menu-nav-item-content {

  background-image : unset;
  
  }

This is for v7.1 and specific to the posters need.

Let us know how it goes.

THANK YOU!!! I was about to go insane, trying to solve this tiny little issue... much appreciated 🙂 

Hi,

I have a problem with the mobile version of my website. 
The menu button is hidden on my homepage. On the other pages it seems to be working fine

This is the only custom code I added to my homepage:

 <STYLE> #page .page-section{height:80vh!important}
#page .page-section:nth-child(2) {margin-top:-80vh!important;}
#page .page-section:nth-child(2) , #page .page-section:nth-child(2) .section-background{background-color:transparent!important}

Does anybody knows how to fix it? 🙂 

muchos gracias

6 hours ago, valeriehaesen said:

The menu button is hidden on my homepage. On the other pages it seems to be working fine

Please post the URL for a page on your site where we can see your issue.

A link to the backend of the your site won’t work for us, i.e. a url that contains /config/.

Please set up a site-wide password, if your site is not public and you've not already done so.

Post the password here.

Adding a site-wide password does not allow anyone to alter your site. It only allows those with the password to see your site.

Please read the site-wide password and how to share a link documentation to understand how they work.

We can then take a look at your issue.

Hello @tuanphan and @creedon. I'm also just beginning to experiment with 7.1 and would like to use Flex but I want to get rid of the strikethrough on active and hover header nav items. I'd like to replace it with hex color #DA2300 for both active and hovered over links. The site I'm working on is https://begonia-crow-8c57.squarespace.com/ 

pw: ryan

I appreciate any assistance. 🙏

6 hours ago, tiffanydavidson said:

I want to get rid of the strikethrough on active and hover header nav items. I'd like to replace it with hex color #DA2300 for both active and hovered over links.

Add the following to Design > Custom CSS.

/* begin disable navigation flex effect */

  body:not( .header--menu-open ) .header-nav-item--active > a {
  
    background : unset;
    
    }
    
  .tweak-global-animations-animation-type-flex .header-nav-item--active:not( .header-nav-item--folder ) a::after {
  
    transform : scaleX( 0 );
    
    }
    
  @media ( hover : hover ) {
  
    .tweak-global-animations-animation-type-flex .header-nav-item:not( .header-nav-item--folder ) a:hover::after,.tweak-global-animations-animation-type-flex .header-nav-folder-item a:hover::after {
    
      transform : scalex( 0 );
      
      }
      
    }
    
  /* end disable navigation flex effect */

body:not( .header--menu-open ) [ data-header-style = "gradient" ].header .header-nav-wrapper .header-nav-item--active a,
body:not( .header--menu-open ) [ data-header-style = "gradient" ].header .header-nav-wrapper a:hover,
.tweak-global-animations-animation-type-flex .header-nav-item:not( .header-nav-item--folder ) a::after

  {
  
    color : #DA2300;
    
    }

Let us know how it goes.

@creedon That did it! I'm amazed. Thank you so incredibly much. I went through multiple Squarespace reps trying to figure out why this strikethrough appeared- so odd?! I figured because it's my first foray into 7.1 I was just missing something simple, but none of them could answer my question about how to remove it, when using Flex, or not. I appreciate your help.

Hello !

One more for me pleaaase!

I am trying to remove the underline from the active nav INSIDE A FOLDER 

The css above don't work for me 😞

My website is: https://www.nojqui.com/portfoliosries/nouvelle-zlande

7 hours ago, nojqui said:

Hello !

One more for me pleaaase!

I am trying to remove the underline from the active nav INSIDE A FOLDER 

The css above don't work for me 😞

My website is: https://www.nojqui.com/portfoliosries/nouvelle-zlande

Add to Design > Custom CSS

span.header-nav-folder-item-content, .header-menu-nav-item-content {
    background-image: none !important;
}

AAAAHHH thank youuu you are the best yes yes 

On 5/30/2020 at 11:45 AM, tuanphan said:

use this

.header-nav-item--active a {
   background-image: none !important;
}

 

@tuanphan this isn't working for me 

https://playseum-trial.squarespace.com/

pw: playseum

4 hours ago, atfirstblink said:

@tuanphan this isn't working for me 

https://playseum-trial.squarespace.com/

pw: playseum

Use this

#header .header-menu-nav-item:not(:last-child) a:after {
    display: none;
}
.header-menu-nav-item-content {
    background-image: none !important;
}

Is there a way to remove the underline and change the color of the active link? 

I was able to successfully remove the underline with:

.header-nav-item--active a {

   background-image: none !important;

}

I just want the active page text to be in the color #ffa124. Any help is appreciated! Thanks!!

Site: https://goby-cat-49ba.squarespace.com/ (password: hey")

On 12/27/2023 at 3:08 AM, raisinsupremacy said:

Is there a way to remove the underline and change the color of the active link? 

I was able to successfully remove the underline with:

.header-nav-item--active a {

   background-image: none !important;

}

 

I just want the active page text to be in the color #ffa124. Any help is appreciated! Thanks!!

Site: https://goby-cat-49ba.squarespace.com/ (password: hey")

With color, use this code

div.header-nav-item--active>a {
    color: #ffa124 !important;
}

Do you need code on mobile?

On 12/28/2023 at 4:59 AM, tuanphan said:

With color, use this code

div.header-nav-item--active>a {
    color: #ffa124 !important;
}

Do you need code on mobile?

Hi @tuanphan,

I would very much like to remove the active navigation link underline on mobile.

I have currently used this code (text-decoration: none!important), which is not removing the underline (although it should?):

@media screen and (max-width: 991px) {
    .header-menu-nav-item--active a {
      color:#d2145d!important;
      text-decoration: none!important;
    }
      .header-menu-nav-item--active:hover a
      {opacity: 0.5!important;
      transition: 0s 0s ease-in-out
    }
}

Website: www.aulaseriene.no

Thanks!

On 12/30/2023 at 7:35 AM, Thormod_RK said:

Hi @tuanphan,

I would very much like to remove the active navigation link underline on mobile.

I have currently used this code (text-decoration: none!important), which is not removing the underline (although it should?):

@media screen and (max-width: 991px) {
    .header-menu-nav-item--active a {
      color:#d2145d!important;
      text-decoration: none!important;
    }
      .header-menu-nav-item--active:hover a
      {opacity: 0.5!important;
      transition: 0s 0s ease-in-out
    }
}

Website: www.aulaseriene.no

Thanks!

No need to use @media code. Use this shorter CSS only

div.container.header-menu-nav-item--active div {
    background-image: none !important;
}

Had to use this to kill off ALL underlines like parent nav category links, child links, etc.

a, a * {
  border-bottom: none !important;
    background-image: none !important;
    text-decoration: none !important;
    }

This is insanely frustrating to constantly find new CSS to do the simplest things because they are not in the design options.