Jump to content

Reducing line space between navigation links and underline

Recommended Posts

  • Replies 5
  • Created
  • Last Reply

Add the following to Design > Custom CSS.

.site-title.canvas-style-masthead-logo-left #topNav>nav>ul>li>a {

  padding-bottom: 13px;
  
  }

That is about half the space between than there was before. You can adjust the number to suit.

Let us know how it goes.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment
3 minutes ago, creedon said:

This worked perfectly! I appreciate your help!

 

Would you also happen to know how it'd be best to go about changing the text within a navigation link once hovered over?

 

Add the following to Design > Custom CSS.


.site-title.canvas-style-masthead-logo-left #topNav>nav>ul>li>a {

  padding-bottom: 13px;
  
  }

That is about half the space between than there was before. You can adjust the number to suit.

Let us know how it goes.

 

Link to comment
34 minutes ago, lizayala1211 said:

Would you also happen to know how it'd be best to go about changing the text within a navigation link once hovered over?

Are you thinking of something like changing the color? Add the following CSS.

body #topNav a:hover, body #topNav .active-link>a:hover {

  color: red;
  
  }

You can change the color to meet your needs. If you're thinking of another kind of change please describe in more detail.

Let us now how it goes.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment
Just now, creedon said:

Not changing the color, but instead, once the link is hovered over the text would say 'Coming Soon'  rather than 'Work, Energy and Community Market'.

 

Are you thinking of something like changing the color? Add the following CSS.


body #topNav a:hover, body #topNav .active-link>a:hover {

  color: red;
  
  }

You can change the color to meet your needs. If you're thinking of another kind of change please describe in more detail.

Let us now how it goes.

 

Link to comment
On 9/18/2020 at 4:45 PM, lizayala1211 said:

Not changing the color, but instead, once the link is hovered over the text would say 'Coming Soon'  rather than 'Work, Energy and Community Market'.

Add the following to your CSS.

#topNav nav ul>:nth-child(3):hover {

  border-bottom: none;
  
  }

Add the following to Settings > Advanced > Code Injection > FOOTER. 

<script>

  $( ( ) => {
  
    $( '#topNav nav ul li:nth-child(3) a' ).hover (
    
      function ( ) {
      
        let $this = $( this );
        
        let w = $this.width ( );
        
        $this
        
          .data ( 'data-default-text', $this.text ( ) )
          
          .data ( 'data-default-style', $this.attr ( 'style' ) )
          
          .text ( 'Coming Soon!' );
          
        if ( $this.width ( ) < w ) $this.width ( w );
        
        },
        
      function ( ) {
      
        let $this = $( this );
        
        let s = $this.data ( 'data-default-style' );
        
        $this.text ( $this.data ( 'data-default-text' ) );
        
        if ( typeof s == 'undefined' ) {
        
          $this.removeAttr ( 'style' );
          
          } else {
          
            $this.attr ( 'style', s );
            
            }
        }
        
      );
      
    } );
    
  </script>

Let us know how it goes.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.