Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Remove main underline


nickbarr

Question

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

Screen Shot 2020-05-12 at 3.04.53 PM.png

Edited by nickbarr
Update the text
Link to comment

9 answers to this question

Recommended Posts

  • 0

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

 

Link to comment
  • 0

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

 

Link to comment
  • 0

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.

Edited by christyprice
Link to comment
  • 0
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?

Link to comment
  • 0

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

 

Link to comment
  • 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!

Screen Shot 2021-04-08 at 5.36.02 AM.png

Screen Shot 2021-04-08 at 5.37.26 AM.png

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...