Remove main underline

Site URL: https://www.nickbarr.co/

Hey,

I added some code to reveal an underline on selected menu titles on roll over.

How do I remove the main page underline. Here is my code and screen grab. I have tried other older posts but nothing has worked.

@media screen and (min-width:768px) {
/* masonry-gallery-image-grow-on-hover sqs.7.1  */
.gallery-masonry-wrapper :hover img {
               display: inline-block;
               vertical-align: middle;
               -webkit-transform: translateZ(0);
                       transform: translateZ(0);
               box-shadow: 0 0 1px rgba(0, 0, 0, 0);
               -webkit-backface-visibility: hidden;
                       backface-visibility: hidden;
                   -moz-osx-font-smoothing: grayscale;
               -webkit-transition-duration: 0.3s ;
                       transition-duration: 0.3s ;
               -webkit-transition-property: transform;
                       transition-property: transform;
             }
            .gallery-masonry-wrapper :hover img,
             .gallery-masonry-wrapper:active img {
               -webkit-transform: scale(1.0) ;
                       transform: scale(1.02
                       ) ;
             }
.header-nav-item a:hover {
    color: grey !important;
}
}
.header-nav-item a:hover {
    text-decoration: underline;
}

Do you mean remove the line under the active navigation item? You can do this by adding this code to Design > Custom CSS

/* remove underline on nav */
.header-nav-item--active a {
  background-image: none !important;
}

Thanks! I just found this before you messaged back, it seemed to have worked. 

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

Christy,

That code is not removing the nav bar underline on my Montauk template website. Any other ideas?

www.carolynmackin.com

Best, Carolyn

Hi @carolynmackin,

Montauk has a different code base. Here's what you'll need to add to Design > Custom CSS to remove the active link underline:

#topNav ul>li.active-link>a {
border-bottom-width: 0 !important;
}

On 9/27/2020 at 10:38 AM, christyprice said:

Hi @carolynmackin,

Montauk has a different code base. Here's what you'll need to add to Design > Custom CSS to remove the active link underline:

 

Hey Christy! That code is not working on my site to remove the line-any ideas?

brightbarboston.com

Thanks!

Hi @brightbarboston, you're on a 7.1 template so you'll need to use this code:

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

You can find that and lots more in this post: How to Customize your Navigation in Squarespace 7.1

If that code isn't working for you, check and see if you already have some custom code affecting navigation - you'd need to edit that instead.

15 minutes ago, christyprice said:

Hi @brightbarboston, you're on a 7.1 template so you'll need to use this code:

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

You can find that and lots more in this post: How to Customize your Navigation in Squarespace 7.1

If that code isn't working for you, check and see if you already have some custom code affecting navigation - you'd need to edit that instead.

Hey! I tried that and it still wont go away! My site is brightbarboston.com

any chance you could take a peak at it?

@brightbarboston, this is not an elegant solution, but it should get you there:

.tweak-global-animations-animation-type-flex .header-nav-item:not(.header-nav-item--folder) a::after, .tweak-global-animations-animation-type-flex .header-nav-folder-item a::after {
    height: 0;
}

On 4/13/2021 at 5:45 PM, christyprice said:

@brightbarboston, this is not an elegant solution, but it should get you there:

.tweak-global-animations-animation-type-flex .header-nav-item:not(.header-nav-item--folder) a::after, .tweak-global-animations-animation-type-flex .header-nav-folder-item a::after {
    height: 0;
}

 

Thanks Christine! One more question actually!

I am trying to do a title overlap slideshow but it looks pretty weird on front page so I deleted the "A Tan you can Trust" line for now. I can't figure this out but I want my header slideshow to look like this but I can't get rid of the padding: any thoughts? This is my current site:

https://brightbarboston.com

Here is the goal:

https://katiforner.com/

Thank you in advance!