Removing underlines from all navigation links (header and sitewide) and replacing with bold text rollover

Hello,

 I'd like to remove the underlines from all navigation links (header and sitewide) and replace with bold text (on rollover and selected page)

I've looked on various forums on how to remove underlines but nothing has worked so far. I've tried the following:

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

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

/* styling link underlines sitewide */
.sqs-block-html a {background-image:none!important;}
.sqs-block-html h1 a, h2 a, h3 a, h4 a, p a {
 border-bottom-style: none !important;  text-decoration-line: none !important;
}

I would have thought something like this would be easy to change. I'm sure it's possible but my knowledge of CSS is limited.

Any help would be appreciated!

Hey @samfiskdesign can You please provide site URL?

45 minutes ago, SquareRefresh said:

Hey @samfiskdesign can You please provide site URL?

I am also wondering the same thing, as well as how to make my photo gallery go under my header. Any help is very much appreciated!

Website is: https://triplesaus.com

2 minutes ago, AlexxHull said:

I am also wondering the same thing. Any help is very much appreciated!

Website is: https://triplesaus.com

Hey @AlexxHull try to add next code in Custom CSS:

body:not(.header--menu-open) .header-nav-item--active a {
  background: none !important;
}

.sqs-block-html a,
.image-title-wrapper a,
.image-subtitle-wrapper a,
.sqs-image-caption a,
.image-caption a,
.sqs-block-newsletter a,
.list-item-content__description a,
.list-section-title a {
  text-decoration: none !important;
}

4 minutes ago, SquareRefresh said:

Hey @AlexxHull try to add next code in Custom CSS:

body:not(.header--menu-open) .header-nav-item--active a {
  background: none !important;
}

.sqs-block-html a,
.image-title-wrapper a,
.image-subtitle-wrapper a,
.sqs-image-caption a,
.image-caption a,
.sqs-block-newsletter a,
.list-item-content__description a,
.list-section-title a {
  text-decoration: none !important;
}

 

Unless i'm pasting this in the wrong spot, unfortunately its not working.

Im pasting it in: Settings > Advanced > Code Injection > Header

Correct?

25 minutes ago, AlexxHull said:

Unless i'm pasting this in the wrong spot, unfortunately its not working.

Im pasting it in: Settings > Advanced > Code Injection > Header

Correct?

You should to paste it in Design > Custom CSS

1 hour ago, SquareRefresh said:

You should to paste it in Design > Custom CSS

Appreciate that, now it has no underline, which is good, but isn't bold.

10 minutes ago, AlexxHull said:

Appreciate that, now it has no underline, which is good, but isn't bold.

Please replace previous code to:

body:not(.header--menu-open) .header-nav-wrapper a:hover {
  font-weight: bold;
}

body:not(.header--menu-open) .header-nav-item--active a {
  background: none !important;
  font-weight: bold;
}

.sqs-block-html a,
.image-title-wrapper a,
.image-subtitle-wrapper a,
.sqs-image-caption a,
.image-caption a,
.sqs-block-newsletter a,
.list-item-content__description a,
.list-section-title a {
  text-decoration: none !important;
}

1 minute ago, SquareRefresh said:

Please replace previous code to:

body:not(.header--menu-open) .header-nav-wrapper a:hover {
  font-weight: bold;
}

body:not(.header--menu-open) .header-nav-item--active a {
  background: none !important;
  font-weight: bold;
}

.sqs-block-html a,
.image-title-wrapper a,
.image-subtitle-wrapper a,
.sqs-image-caption a,
.image-caption a,
.sqs-block-newsletter a,
.list-item-content__description a,
.list-section-title a {
  text-decoration: none !important;
}

 

That works now! Appreciate your help very much!

2 minutes ago, AlexxHull said:

That works now! Appreciate your help very much!

You're welcome!

8 hours ago, SquareRefresh said:

Hey @samfiskdesign can You please provide site URL?

Yeah here's the URL, thanks https://paddlefish-oarfish-kayn.squarespace.com/config/

Password: sfd123

5 hours ago, SquareRefresh said:

Please replace previous code to:

body:not(.header--menu-open) .header-nav-wrapper a:hover {
  font-weight: bold;
}

body:not(.header--menu-open) .header-nav-item--active a {
  background: none !important;
  font-weight: bold;
}

.sqs-block-html a,
.image-title-wrapper a,
.image-subtitle-wrapper a,
.sqs-image-caption a,
.image-caption a,
.sqs-block-newsletter a,
.list-item-content__description a,
.list-section-title a {
  text-decoration: none !important;
}

@samfiskdesign add my previous code

1 hour ago, SquareRefresh said:

@samfiskdesign add my previous code

Thank you, the bold is working on desktop but not mobile version. Underlines are still showing on both unfortunately

On 11/22/2021 at 10:19 PM, samfiskdesign said:

Yeah here's the URL, thanks https://paddlefish-oarfish-kayn.squarespace.com/config/

Password: sfd123

Add to Design > Custom CSS

.header-nav-item a:after {
    opacity: 0;
}